CSS - Aligning images horizontally

[Copernic Reporter]

I'm new to CSS and am trying to figure out what the best way is to align 3 or more images horizontally with some text on the top.

 

Something like this:

 

 

 

live example on Winamp website (follow us box, right side):

http://www.winamp.com/

 

I searched everytwhere on the web but I stumbled on a lot of unnecessary stuff for Wordpress etc... Until now I have just this but no CSS:

<div id="social">
<p>FOLLOW US ON SOCIAL SITES</p>
    <ul>
    <li><a href="http://www.youtube.com/user/example"><img src="images/youtube.png" alt="youtube"></a></li>
    <li><a href="http://www.twitter.com/example"><img src="images/twitter.png" alt="twitter"></a></li>
    <li><a href="http://www.facebook.com/example"><img src="images/fb.png" alt="facebook"></a></li>
     </ul>
</div>

Thanks!

[the better twin]

#social ul li {

float:left;

}

/* or */

#social ul li {

display:inline-block;

}

[Copernic Reporter]

Very hard to do it! :blush: Thank you and God Bless!

[LaP]

inline-block wont work under ie6 and will work only for inline level elements under ie7 (li is a block level element).

 

If you need ie6 and ie7 support use the first option.

[Seahorsepip Veteran]

I'd suggest to always use float and only use inline-block when you have no other choice because of browser support ;)

[the better twin]

I'd suggest to always use float and only use inline-block when you have no other choice because of browser support ;)

I would say Ie8+ is pretty good browser support :p. While it does depend on the situation, it does save you from having to deal with clearing floats. 

[LaP]

I'd suggest to always use float and only use inline-block when you have no other choice because of browser support ;)

 

Well you don't always need or even want to support ie6 and ie7.

 

What he really wants to do is changing the display to inline-block. Float removes the elements from the normal flow of the web page and float it right or left. It can cause display problems if you don't properly understand what float is and what it does specially if you over use it in context it should not really be used.

 

My advise is to use inline-block because this is what he wants to do. If ie6 and ie7 support is really needed then float could be used or the list dropped. The list makes sense as far as semantic goes but when you want to support ie6 you must be ready to cut some corners.