Thursday, July 26, 2007

CSS two column float layout - 3px bug workaround

Take this typical two columns float layout. Left column holds menu, right column is for content. What's wrong with it? Nothing, unless the talk is about IE6. By CSS design there should not be any space between left menu column and content on the right, but in IE6 there is.

<html>
<head>
<title>Float Layout - 3px IE Bug</title>
<style type="text/css">

html, body {
margin:0px;
padding:0px;
border:0px;
}

#wrapper {
margin:0px;
padding:0px;
border:0px;

height:100%;

background:#ffffff;
}

#left {
float:left;
width:175px;
margin:0px;
padding:0px;
border:0px;
background:#eedddd;
}

#right {
height:100%;
background:#bbeebb;
border:0px;
margin:0px;
padding:0px;
margin-left:175px;
}

p {
margin-top: 0px;
}

</style>
</head>

<body>
<div id="wrapper">
<div id="left">
<p>menu</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
</div>

<div id="right">
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
<p>filler</p>
</div>
</div>
</body>
</html>

If IE5 is a history for now, IE6 is used by one third of Internet users. So, for CSS beginners, the quick fix to solve this IE problem with additional space around floats is to make this space eaten by negative margin of the float itself. In practice this looks like:

#left {
float:left;
width:175px;
margin:0 -175px 0 0;
padding:0px;
border:0px;
background:#eedddd;
}

See example files at: http://rainforce.org/pile/css/