Matthew Knott

It's hard to explain to someone who is new to css the impact of various properties on their layouts.

The best way is to go through creating a simple fixed-width, two column, page layout, with a header and a footer.

To start with, lets look at the html markup we'll use.

<div id="page_container">
  <div id="page_header"><h1>My Site</h1></div>
  <div id="page_content">
    <div id="page_navigation"></div>
    <div id="page_main_content"></div>
  </div>
  <div id="page_footer"><p>© 2008</p></div>
</div>


First we set the div to the centre of the page:

html, body { text-align: center; }
#page_container { margin: 10px auto; width: 900px; text-align: left; display: block; overflow: hidden; }

The text-align: center sets the page to the centre of the screen, when combined with the margin: 10px auto property assigned to page_container.

Currently, the page will align centrally and you will have 4 divs within the page container.

Let's format the header:

#page_header { display: block; clear: both; float: left; overflow: hidden; }


Clear: both ensures that no objects overlap the header.

Next the page content container:

#page_content { display: block; clear: both; float: left; overflow: hidden;  }


And the columns:

#page_navigation { width: 200px; display: block; float: left; margin: 0;  }
#page_main_content { width: 700px; display: block; float: left; margin: 0; }

Finally, the footer:

#page_footer { display: block; clear: both; float: left; overflow: hidden;  }


So there you have it a quick and simple css page layout.

Tags: Design css Layout Central Float