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/

1 comment:

  1. With the True Count the participant has a consistent measure of how many of} additional 정카지노 participant favourable playing cards are contained inside the playing cards remaining to be dealt. The participant can use this info to differ their bet and playing in} strategy. Deviations from Basic Strategy are far less important than putting huge bets when the True Count is excessive and low bets when the True count is low or unfavorable. The majority of conditions the place it's correct of the participant to double are beginning hands that might be made very robust by the addition of a ten value card or an Ace. Therefore, doubling turns into more favourable when there are more ten value playing cards and Aces left within the deck.

    ReplyDelete