okay, that is different thing. I can reproduce that effect.
I tried positioning the divs all absolute and came up with the following:
[source lang="xml"]<!DOCTYPE html>
<head>
<meta charset='UTF-8' />
<title>Test</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#navbar {
width: 100%;
height: 30px;
background-color: yellow;
display: inline;
top: 0;
left: 0;
position: absolute;
}
#wrapper {
background-color: red;
width: 100%;
height: 100%;
}
#main-wrapper {
background-color: blue;
width: 100%;
height: 100%;
}
#sidebar {
background-color: orange;
width: 32px;
left:0px;
display:inline;
position:absolute;
top:30px;
bottom:0px;
}
#content {
background-color: green;
left: 32px;
position:absolute;
top:30px;
bottom:0px;
}
.clear { clear: both;}
</style>
</head>
<body>
<div id="wrapper">
<div id="navbar"></div>
<div class="clear"></div>
<div id="sidebar"></div>
<div id="content"></div>
</div>
</body>
</html>[/source]
It seems to produce the right result in IE, FF and Chrome.
Hope that helps
The content DIV has no width in Firefox 16 either.
