There’s a basic issue with placing floating <div>s or any floating element for that matter in a parent <div>, the parent looses all sense of height and becomes essentially invisible.  The parent can now no longer have a background, border or any defining style that would show up behind and around the children elements.  But with a bit of CSS you can remedy that situation. Look at how the Example After heading is pushed around because the <div> isn’t cooperating nicely.

HTML:

<div id="Footer">
	<a href="/blog/">Home</a>
	<a href="/blog/contact/">Contact</a>
</div>

CSS:

#Footer {
	background: yellow;
	border: 1px solid blue;
}
#Footer A {
	float: left;
	width: 100px;
}
#Footer:after {
	content: "";
	display: block;
	height: 100%;
	clear: both;
}

Example Before:

Example After:

For a few years now I’ve relied on zoom: 100% as my saving grace for finding lost elements in Internet Explorer.  You see sometimes when you try to position an element on the screen, place a transparent <div> over a Flash object, or do something slighly out of the ordinary, IE will freak out and not display the object, hide it, or drop it to the bottom of z-index order.

Fortunately there’s a solution in the form of a hack called Zoom.  Zoom is a CSS style that allows IE to zoom in on an element.  Typically you don’t need to do this, and oddly enough when you do apply zoom even at the non-zoomed level of 100% it forces Internet Explorer to re-evaluate it’s CSS styling.  So now you can make sure that these lost elements come back to where they are supposed to be.

So when in doubt, use zoom.

<!--[if IE]>
<style type="text/css">
	#element{
		zoom: 100%;
	}
</style>
<![endif]-->