After going through a number of examples and trying to modify them to get what should be a simple layout, I’ve just about given up. The layouts I’ve found are based on percentage widths or fixed widths…not both.
Here’s what I have so far. Note that it does not come close to working correctly in opera 9.26, FF2 or IE6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
/* resets */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, pre, form, fieldset, input, select, textarea, button, label, legend, p, blockquote, code, caption, dl, dt, dd, ol, ul, li, table, th, tr, td, tbody, tfoot, strong, em, b, i, u, strike, abbr, acronymn, address {
margin: 0px;
padding: 0px;
border: 0px;
outline: 0px;
vertical-align: baseline;
background: transparent;
}
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 100.01%; /* ie font size bug */
color: black;
}
p { margin: .2em 0 .8em 0; }
/*resets */
body {
background: silver;
}
#header {
background: red;
height: 90px;
clear: both;
}
#footer {
background: green;
height: 90px;
clear: both;
}
#main { }
#maincol {
background: yellow;
position: relative;
float: left;
margin: 0px 275px 0px 0px;
width: 100%;
height: 1%;
}
#rightcol {
background: orange;
position: relative;
float: right;
width: 275px;
}
#maincol #maincol_pad {
padding: 12px;
}
#rightcol #rightcol_pad {
padding: 12px 12px 0px 12px;
}
#content {
background: white;
}
/* right column pods */
#rightcol .pod {
background: white;
margin-bottom: 12px;
}
#rightcol .pod .pod_title {
font-weight: bold;
color: blue;
}
#rightcol .pod .pod_content {
padding: 4px 4px 4px 4px;
}
/* right column pods */
</style>
</head>
<body>
<div id="header"><p>header</p></div>
<div id="main">
<div id="maincol">
<div class="maincol_pad">
<div id="content">
<p>content</p>
<p>content</p>
</div>
</div>
</div>
<div id="rightcol">
<div id="rightcol_pad">
<div class="pod">
<div class="pod_title">Title</div>
<div class="pod_content">pod content</div>
</div>
<div class="pod">
<div class="pod_title">Title</div>
<div class="pod_content">pod content</div>
</div>
<div class="pod">
<div class="pod_title">Title</div>
<div class="pod_content">pod content</div>
</div>
</div>
</div>
</div>
<div id="footer"><p>footer</p></div>
</body>
</html>
The right column is 275px and the left column is supposed to fill in the rest of the space.
#maincol_pad and #rightcol_pad are supposed to be fixes for the IE box model issues.
After spending hours on this, I’m sorely tempted to go back to using tables. They seemed to be so much easier and reliable…
Any fix suggestions or links to working examples would be greatly appreciated