IMHO the following is the typical 3-column-layout using CSS. Without the surrounding #main-div it looks OK.
<html>
<head>
<style type="text/css">
#main {
position: absolute;
left: 100px;
top: 100px;
/* width: 400px; */
}
.blue {
height: 30px;
background-color: blue;
float:right;
}
.green {
height: 30px;
background-color: green;
}
.red {
height: 30px;
background-color: red;
float: right;
}
</style>
</head>
<body>
<div id="main">
<div>
<div class="blue">RIGHT</div>
<div class="red">MIDDLE</div>
<div class="green">LEFT</div>
</div>
<div>
<div class="blue">RIGHT</div>
<div class="red">MIDDLE ####</div>
<div class="green">LEFT</div>
</div>
<div>
<div class="blue">RIGHT</div>
<div class="red">############### IN THE MIDDLE</div>
<div class="green">LEFT</div>
</div>
</div>
</body>
If you make the window very small or add the #main-div the last “LEFT” drops out of the layout. I can give it a sufficient width and it works again, but I was asking myself if I can tell the browser to let the width of the middle-column dictate the width of the #main-div, so that the third LEFT isn’t kicked out and the whole div is not wider than necessary?
I don’t want to calculate this with JavaScript…:(
Try adding this to your stylesheet:
does this help?