Skip navigation

Category Archives: float

in my journey on making XHTML from CSS in early days i was stuck by float property. when i used float in a container, the background from the container just won’t appear in FireFox but it appear in IE 6, and the only came up in my mind was to add background color on each float, which is frustrating. what if you want to change color, then you have to re-type the color all over again.

lets use this simple CSS example:

<div style=”width:100px; background-color:#CCFF33;”>
<div style=”float:left; width:50px;”>box 1</div>
<div style=”float:left; width:50px;”>box 2</div>
</div>

you will get this in IE 6:
as appear in IE6
and you will get this on FF:
as appear in FF

not very nice eh? then i searched through Google when i met with this clear property clear:both. you can use this property in the end of every float in a container so your container background color will blanket all your float property. this way the CSS display on FF will have the same look as on IE 6, and beside this is what you want right?

<div style=”width:100px; background-color:#CCFF33;”>
<div style=”float:left; width:50px;”>box 1</div>
<div style=”float:left; width:50px;”>box 2</div>
<div style=”clear:both;”></div>
</div>

go on, give it a shot.

Advertisements