Matthew Knott - Blog

Previous: Time for a psych evaluation?
Next: Coming Soon, The Miserable Sods Score Selector

Understanding CSS for page layouts

Posted Wednesday, 03 September 2008 10:40. Read 2 times.

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.

rough layout of our page

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.

Posted in: Development Design
Tags: Design css Layout Central Float

Comments

  • Stuff, posted by mathew1. What can I say apart from thanks for the lesson, but can you please think of us poor users and get rid of this form ( bloody developers ).

    2. The css doesnt seem to consider height/width so if you add borders and view that page you constructed the blocks are not what you would expect. Also what happens when you try to resize the window and what does this mean for accessibility in terms of accessing through various devices and other browsers. When resizing the window I have seen developers to use the absolute and relative positioning techniques..can you expand on their use and consider the use of these styles :

    html, body { margin: 0; padding: 0;}
    #page_container {width: 80%; height: 80%; border:solid 1px; }
    #page_header { width: 100%; height: 10% clear: both; overflow: hidden; border: solid 1px}
    #page_content { width: 100%; height: 80%; display: block; clear: both; float: left; overflow: hidden; border: solid 2px; margin: 0; padding: 0; height: 80%;}
    #page_navigation { width: 25%; height:80% margin: 0; padding:0; border: solid 1px; display: block; float: left; }
    #page_main_content { position:absolute; left: 0px: top: 10% ; width: 75%; margin: 0; border: solid 1px; overflow: hidden; }
    #page_footer { width: 100%; display: block; clear: both; float: left; overflow: hidden; border: solid 1px }

    #ive added a page container and some positioning to hold the content cell to the right of the navigation - wasnt doing it with yours...

    Cheers and hope you slept well.
    On a political note what do you think of Obama and do you think he will positively or negatively affect black music [sic]. I was hoping that Arnie would take the no 1 slot with Sly taking up the position of head of defence ...what a film ...........
     
  • Form?, posted by MatthewWhat's wrong with the form? If I don't put in the activation I lose control of spam etc.
     
  • Obama!, posted by MatthewI love Obama, I like the way he took all of that crap from Hillary and the blew here away in one sentence. I genuinely like him. I think that the republicans have had they're time in office and the democrats, under Obama will make America a better place.

    I think that the invasion of Iraq was essential, not too sure about Afghanistan but if it keeps fuel costs down thats fine with me... however. In this time of economic crisis, America and Britain and investing billions of tax payer money in this war, when we should be getting the hell out now. That story regarding the hydro electric dam turbine, great story, but our involvement was supporting the afghan army through Taliban territory. I think lessons should be learned from history... Nuclear weapons end wars.

    Seriously though, with such prevalent racism still existing in America (From all sides not just the whites), and huge (and deservedly so) respect for vietnam vets, let alone pows, I suspect that America will bow to McCain. Having said that, Whites are soon going to loose the Majority in America and someone like Obama (e.g. an obvious choice for change) will eventually get his day.
     

Add a comment

3 comments