Centering Floats

Centering Floats with CSS

[frattaroli]

So, in response to this "too old" message:

[webmasterworld.com ]

I've one-upped it.

Take your div filled with floated-divs:

<div style="width: 100%; text-align: center;"> 
 <div> 
 <div style="float: left;">text1</div> 
 <div style="float: left;">text2</div> 
 <div style="float: left;">text3</div> 
 </div> 
</div> 

You may try all sorts of different methods to center that div container. The link above shows how to do it, but you have to use some non-standard css to do it. I've found how to do it while avoiding the non-standard css.

CSS

<style type="text/css"> 
 .IEisStupid { display: inline-block; } 
</style> 
<!--[if lt IE 8]> 
 <style type="text/css"> 
 .IEisStupid { display: inline !important; } 
 </style> 
<![endif]--> 

XHTML

<div style="width: 100%; text-align: center;"> 
 <div class="IEisStupid" style="display: inline-block;"> 
 <div style="float: left;">text1</div> 
 <div style="float: left;">text2</div> 
 <div style="float: left;">text3</div> 
 </div> 
</div> 

Took me too long to center those floaters. I have much more important things to do than that.

Have fun programming.

[frattaroli]

BTW thanks to SuzyUK for letting us know about having to tell IE<8 twice to make it treat inline-block elements correctly.

[CWebguy]

Css is so complicated, haha. When will they come out with browsers that obey? ;) Oh well, in a perfect world. Thanks for this by the way.