I guess you can't do that with absolute positioning, which is too bad. It would be so much easier if
, absolute positioned header and menu with content that flowed around it . . . because that would allow you to put the code of your menu and header at the tail of your documents.
The solution I found is to not position anything other than its natural flow of the page. Unfortunately that means the menu and header text will be what a robot sees first when they view the page.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css" media="all">
<!--
body {
margin:0;
padding:0;
font-size:100%;
line-height:1.125em;
}
#header {
height: 142px;
width: 100%;
padding: 0px;
margin: 0px;
border: 0px none;
background: #336699 url(none);
}
#menu {
float: left;
width:250px;
height:400px;
border:none 0px;
background: #999999;
margin:0 16px 16px 0;
}
#content {
background: #ffffff ;
margin: 0;
}
#footer {
background: #336699 ;
margin: 0;
padding: 0;
height:40px;
width:100%;
}
.copyright {
display: block;
margin-left: 250px;
}
-->
</style>
<title>
title
</title>
</head>
<body>
<div id="header">
This is where a couple of images for the header reside.This is where a couple of images for the header reside.This is where a couple of images for the header reside.This is where a couple of images for the header reside.This is where a couple of images for the header reside.This is where a couple of images for the header reside.This is where a couple of images for the header reside.This is where a couple of images for the header reside.This is where a couple of images for the header reside.This is where a couple of images for the header reside.
</div>
<div id="menu">
There will probably be a table with links to act as the menuThere will probably bee a table with links to act as the menuThere will probably bee a table with links to act as the menuThere will probably bee a table with links to act as the menuThere will probably bee a table with links to act as the menu </div>
<div id="content">
<p>
This is where a bunch of text that constitutes the sontent will go. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur pulvinar lacinia. Vivamus tristique bibendum fringilla. Aliquam tortor augue, auctor vitae imperdiet nec, bibendum sit amet elit. Fusce in tortor nibh, in porta risus. Duis vehicula vestibulum mi sit amet vestibulum. Donec neque odio, consectetur id consequat quis, bibendum eu augue. Phasellus rutrum viverra ante, sed auctor libero eleifend in. Quisque quis neque diam, eget pretium sapien. Pellentesque bibendum dui vel massa auctor fermentum. Donec magna metus, sollicitudin sed placerat sit amet, scelerisque e malesuada a, euismod vel risus. Nunc pellentesque, magna a adipiscing consequat, eros nunc varius risus, vel imperdiet magna metus vitae justo. Sed arcu dolor, dapibus id volutpat at, semper a quam. Donec bibendum facilisis purus quis fringilla. Nunc volutpat elit lacus. Mauris sit amet velit metus. Nulla lobortis rutrum orci, non imperdiet nulla feugiat in. Aenean id leo est. Ut eu leo et erat vulputate elementum quis nec justo.
</p>
<p>
Duis vehicula vestibulum mi sit amet vestibulum. Donec neque odio, consectetur id consequat quis, bibendum eu augue. Phasellus rutrum viverra ante, sed auctor libero eleifend in. Quisque quis neque diam, eget pretium sapien. Pellentesque bibendum dui vel massa auctor fermentum. Donec magna metus, sollicitudin sed placerat sit amet, scelerisque eu risus. Morbi eget mauris turpis. Sed vitae felis tortor, at imperdiet neque. Integer velit tortor, </p>
</div>
<div id="footer">
<p class="copyright">This is the copyright and disclaimer footer thingy </p>
</div>
</body>
</html>