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">  {position:absolute;top:0px; left:0px;  
          margin:0 0 0 0;padding:20px 0px 0px 0px; 
div.middle{position:absolute;top:80px;left:0px;  width:800px;
           margin:0 0 0 0;padding:0 0 0 0;}  {position:absolute;top:0px; left:0px;  
           width:100px; overflow:hidden; 
           margin:0 0 0 0;padding:20px 0 0 20;
div.content{position:absolute;top:0px; left:100px;width:700px;
           margin:0 0 0 0;padding:20px 0 0 20;
<div class="top">
 <img src="pumrule.gif" width=500 height=40 >
<div class="middle">
 <div class="menu">
   Menu goes here ...

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

Light Bulb

Some CSS Properties Useful for Layout

Attribute Name DOM
Property Name
Values Default Value Remarks
position position relative, absolute, fixed, static static followed by two position:value combinations, e.g.
"top:0px; left:20px;" or
"bottom:0px; right:40px;"
Values in length or %
height height length,% auto auto = calc'd by browser
width width length,% auto auto = calc'd by browser
overflow overflow scroll, visible, hidden, auto visible
margin margin top,right,bottom,left
given in length, %
values for top, right, bottom, left are in that order, with no commas.
padding padding top,right,bottom,left
given in length,not %
none space between text and border of element--
values for top, right, bottom, left are in that order with no commas.
length means px, pt, cm, etc.