Layout with CSS using the Position tag

With frames, the different sections of the page were in different files. With CSS -- either position or float -- everything must be in one file when it reaches the browser.

You don't necessarily have to write a file that includes everything, however. You can use PHP to make the server include several html files into one main file. This is done with PHP's "require()" function.

IE 6 with Windows doesn't support fixed positioning. This means that everything on the page will scroll up together. The same is, of course, true of float.

Layout Example -- Position

<script type="text/css">
div.top  {position:absolute;top:0px; left:0px;  
          width:800px;height:80px; 
          margin:0 0 0 0;padding:20px 0px 0px 0px; 
          text-align:center;background-color:#ccffcc;}
div.middle{position:absolute;top:80px;left:0px;  width:800px;
           margin:0 0 0 0;padding:0 0 0 0;}
div.menu  {position:absolute;top:0px; left:0px;  
           width:100px; overflow:hidden; 
           margin:0 0 0 0;padding:20px 0 0 20;
           background-color:#ffcccc;}
div.content{position:absolute;top:0px; left:100px;width:700px;
           margin:0 0 0 0;padding:20px 0 0 20;
           background-color:#ccccff;} 
</script>

<div class="top">
 <img src="pumrule.gif" width=500 height=40 >
</div>
<div class="middle">
 <div class="menu">
   Menu goes here ...
 </div>

 <div class="content">
   Content goes here ...
 </div>
<div> 

Some CSS Properties Useful for Layout