Hi,
Im having a slight issue with horizontal widgets.
I have created a horizontal widget area after the header; conveniently a div called after header. Its sits under my menu. I have three instances of YD featured box in place, to create a photo style blog... all is fine except one thing... I cant make the images (3 of them) flush to either side.
If you look below you can see that the images arent filling the space equally, there is a gap on the right. I have tried adjusting the margins, but as the css is for one widget it moves them onto another line if I increase the right margin any more:
Here is my site
Here is my CSS for the widgets:
div.yd_featured_box {
width: 300px;
height: 250px;
background-color: none;
position: relative;
margin-bottom: 20px;
cursor: pointer;
float: left;
margin-right: 18px;
margin-top: 5px;
align: center;
}
div.yd_featured_box img {
width: 300px;
height: 221px;
position: absolute;
top:22px;
border: 1px #000 solid;
}
div.yd_featured_box div h2 {
background:transparent;
}
div.ydfb_text_top {
position: absolute;
top: 0;
height: 120px;
width: 300px;
background-color: none;
padding-bottom:20px;
padding-top: 255px;
-moz-border-radius: 5px 0 0 0;
}
div.ydfb_text_bottom {
background-color: none;
border-top:none;
}
I'm sure I could use a selector to hit one of the items, which I have tried (Im using thesis btw). This isnt working...
.custom li#yd_featuredboxwidget-4 {
float: right;}
Any help or advice you could offer would be greatly appreciated