Understanding CSS for page layouts
Posted on Wednesday, 03 September 2008 11:40It'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.
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 ...........