Example Page Layout With CSS

A Better Approch Than Tables or Frames

This working file is a fixed-width layout made possible through the use of HTML5 tags and CSS3.

You can use this instead of tables or frames. Feel free to adapt this as much as you want to make your own website layout.

Dividing The Page Into Sections

You can split up your content into columns, but be careful of not exceeding 100%.

If you do, you will find one of your intended 'columns' is pushed underneath the others.

This may take some tweaking of the width and margin-right properties.

Go Halves

You can equally divide the page into halves. Just bear in mind that your 100% is a total of your column width percentages and your margin percentages.

We have used a .last class to ensure there is no margin-right on the final column so it sits flush to the right of our site.

When in doubt, do the maths.
  • 2 Columns at 49% = 98%
  • Add one margin right at 1%. Total is now 99%;
  • This means for 50% width in this case you should have done: (100% - 1%) divided by 2 = 49.5%