CSS: align this right

Question

Im having this:

http://jsfiddle.net/h2rsJ/2/

And i want it to be like this:

http://i53.tinypic.com/2u7rf48.png

So that all are vertical align with eachother, the "news" is in the middle and stars on the right and the 3 images on the left.

How can i do that? Help im stuck..

Answer 1

I managed to do it this way. Change your CSS:

.iconFavorite{
background: url(http://www.penrithstar.com.au/images/icon_star.gif) no-repeat;
width: 16px;
height: 16px;
border: none;
display:inline-block;

}

#discoLEvents{
    display: inline-block; width: 200px; border-left: 1px solid #666; border-right: 1px solid #666; text-align: center; height: 40px; }

p{
    line-height: 40px; display: block; float: left; text-align: center; width: 200px; border-left: 1px solid #666; border-right: 1px solid #666; text-align: center; 
}

img{
    float: left;
}

#stars{
    float: right; line-height: 40px;
}

And then your HTML too:

<div id="discoActions" style="border: 1px solid red;">
<img style="width: 40px; height: 40px;" src="http://media.dkbn.dk/Storage/Discos/7829f6d8-a9ee-4e6d-bdf8-e225d91be8f8/Banners/633861096606933426.jpg">
<img style="width: 40px; height: 40px;" src="http://media.dkbn.dk/Storage/Discos/7829f6d8-a9ee-4e6d-bdf8-e225d91be8f8/Banners/633861096606933426.jpg">
<img style="width: 40px; height: 40px;" src="http://media.dkbn.dk/Storage/Discos/7829f6d8-a9ee-4e6d-bdf8-e225d91be8f8/Banners/633861096606933426.jpg">
<p>NEWS</p>

<div id="stars">
<div class="iconFavorite"></div>
<div class="iconFavorite"></div>
<div class="iconFavorite"></div>
<div class="iconFavorite"></div>
<div class="iconFavorite"></div>
</div>
</div>

Answer 2

http://jsfiddle.net/h2rsJ/9/

I'd strongly recommend breaking all of the styling out of the html and putting it in the external style sheet.