A workaround for a problem you might not know you have...yet

[Skelbo]

IE7 has been released and is gaining popularity. And like all things from Microsoft, there is both good news and bad news about its release.
The good news is that IE7 behaves much more like standards compliant browsers (like Firefox and Safari) in the way it renders CSS and HTML than earlier versions did. The bad news is (and I know this is going to seem shocking) that it's still a little buggy.

One of the bugs I recently encountered was the way that IE7 handles what I call a 'Clearing Div'.

One way that I use a 'clearing div' is when I have a 2 column CSS layout with a background image in my wrapper/container div that also has a floated element (like a left side navigation). The clearing div clears the elements inside the wrapper/container div and acts to 'pull down' the contents of the page and show the background image sort of like pulling down a window shade.

Example:

Code: Select all

<div id="wrapperHasABackgroundImage">
<div id="navFloatsLeft">
Some Links Here
</div>
<div id="pageContent">
Hello World, etc.
</div>
<div style="clear:both;"></div>
<div id="footer">
Footer Info
</div>
</div>

Firefox, Safari, Opera and even IE5.5 and IE6 allow the 'clearing div' to be empty, but for some unknown reason IE7 does not.
This can result in problems. For example, the page content can run past and over the footer content or the background image doesn't get fully displayed, etc.

IE7 wants either 'something' (like an '&nbsp;' or '<br />') in the div, or it wants a height specified. Both of which can impact the layout.
I came up with a very simple solution by simply setting the height of the clearing div to 1px and then setting a negative top margin of 1px resulting in a clearing div with no height. IE7 will then allows the clearing div to be empty.

Example Code:

Code: Select all

<div id="wrapperHasABackgroundImage">
<div id="navFloatsLeft">
Some Links Here
</div>
<div id="pageContent">
Hello World, etc.
</div>
<div class="clearingDiv;"></div>
<div id="footer">
Footer Info
</div>
</div>

Example CSS:

Code: Select all

.clearingDiv
{
height:1px;
margin-top:-1px;
clear:both;
}

Voila! Easy Cheesy!

[karinne]

Hmmm ... I've been using the overflow: hidden; method lately and I like it much more.

http://www.quirksmode.org/css/clearing.html

For some reason ... don't ask me why ... maybe it's 'cause we're Friday the 13th today but this code

Code: Select all

 .clearingDiv
{
height:1px;
margin-top:-1px;
clear:both;
}

just looks like an awful hack to me

But hey ... it's another method and it works.