The size problems you're having are because I don't think you're sure what the width property does in CSS. The width assigns the
content width (or width of the rendered content), not the width of the whole element (
ref w3c.org). The actual box width is the sum of the width, margins, paddings, and borders. So, for a 100% width, if any of the other properties are greater than zero, the end result is an box that is
bigger than the containing box (in your case, the window). Ditto for heights.
As for inconsistent box models, versions of Explorer prior to 6.0 used a box model more consistent with the Windows box model, not CSS. Explorer6 uses both box models, and which is used is determined by the document's doctype (
ref: msdn). I didn't look if this applies to your case, but it might...
As for replicating frame layouts, I find it easier to use fixed positioning. For example, a frameset lookalike to your original page would be like this:
Code:
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>New Document</title>
<style type="text/css">
#header {
position: fixed;
left: 0;
width: 100%;
height: 64px;
top: 0;
background-color: #ccffcc;
}
#footer {
position: fixed;
width: 100%;
height: 24px;
bottom: 0;
background-color: #ccffcc;
}
#mainmenu {
position: fixed;
left: 0px;
width: 150px;
top: 64px;
bottom: 24px;
background-color: #ffffcc;
overflow: auto;
}
#submenu {
position: fixed;
left: 150px;
width: 200px;
top: 64px;
bottom: 24px;
background-color: #ffccff;
overflow: auto;
}
#content {
position: fixed;
left: 350px;
right: 0px;
top: 64px;
bottom: 24px;
background-color: #ccccff;
overflow: auto;
}
</style>
</head>
<body>
<div id="header">Header (64 pixels high).</div>
<div id="mainmenu">MainMenu (150 pixels wide).</div>
<div id="submenu">SubMenu (200 pixels wide).</div>
<div id="content">Content.</div>
<div id="footer">Footer (24 pixels high).</div>
</body>
</html>
The key is to set the overflow property to auto on the necessary elements so that they will scroll properly. Also, since all measurements are not necessarily known, the bottom and right properties are usually used, which measure relative to the bottom-right of the containing box (as opposed ot the top-right corner which is used by the top and right properties).
The css solution though, doesn't degrade too well in lower resolution displays if your content doesn't fit entirely in the viewport.
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
