Wacky margins in IE6?
IE6 messing up margins on your elements after you float them?... try this!
div#myHtmlElement { float: left; margin: 10px 20px; display: inline; }
For some reason IE6 seems to like doubling floating element's margins. By using display: inline; it eliminates this effect, and doesn't effect other browsers render of that element.
I'll update this post if I figure out what technically goes on under IE6's hood.
Good luck 
Your friendly neighbourhood,
Smccullough
.clearfix
Ever have a <div/> or another HTML element that WILL NOT listen to a set height? Does this parent element have floating children elements in it?...try this!
[CSS] html .clearfix {height: 1%;} .clearfix:after {clear: both; content: "."; display: block; height: 0; visibility: hidden; }
[HTML] <div id="contentContainer" class="clearfix"> <div id="columnOne"></div> <div id="columnTwo"></div> </div>
The reason why the set height for the containing isn't working is because once you float a(ny) child element that is inside a containing parent element it breaks free of the parent element.
Full validate example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clearfix example</title>
<style type="text/css">
html .clearfix {height:1%;}
.clearfix:after {clear: both; content:".";display:block;height:0;visibility:hidden;}
div#contentContainer { width: 400px; height: auto; }
div#columnOne, div#columnTwo { float: left; width: 200px; height: auto; }
</style>
</head>
<body>
<div id="contentContainer" class="clearfix">
<div id="columnOne">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.....</p>
</div>
<div id="columnTwo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.....</p>
</div>
</div>
</body>
</html>
Good luck
Your friendly neighbourhood,
Smccullough
