css and ie: clear

by prettyscripts on 2010-02-16 11:12:26

i always have a clear class in my css to clear any floating elements:

CSS:

.clear { clear: both; }

and commonly used in html code such as follows:

Code:

<div id="floating_1">something</div>
<div class="clear"></div>
<div id="floating_2">something</div>

if defined correctly, the expected behavior would be 2 floating elements sticking together. however when viewed from IE, there's a block of white space in between the 2 elements. this is because IE doesn't not render the property correctly.

the fix

add visibility to the class:

CSS:

.clear { clear: both; visibility: hidden; }

theorectically elements with visibility set to hidden still occupies the space in the layout. but in IE it works as if set display to none! it's IE so we don't expect it to behave in accordance to standards.

Tags: clear, css, ie