Overview: This tutorial will show you how to make a basic website framework in css with a fixed column and dynamic content.
Tutorial:
To make the most of space on screens websites often use fixed column(s) with a dynamic content.
Well it is relatively simple to do this and only take a few steps but is very useful when using dynamic widths and static widths (why static aswell? well basically saves you measuring everything out).
For this tutorial I will show you how to make a 1 column and content page
#container #column {
}
#container #content {
}
You may be wondering why I have put #container in front of all the divs. On large sites you will often need serveral div tag stylings and this is a way of breaking it up. By putting #container infront I am making the css coding look for a div tag named column and content in that container, hence meaning I can use the same name in another part of the website.
Firstly you need to configer the contanier. This is the div tag which will hold all of the colum and content in align. You need to add the following:
#container {
width:100%; /* this is the width of the whole page, the column and content.
}
Next I will config the column.
#container #column {
width:200px; /* can be change to % if you want */
float:left; /* once again can be changed to right but if you do this other parts will need to be changed. i have put a not next to these points. */
}
Finally styling the content.
#contanier #content {
margin:0px 0px 0px 210px; /* this is the margins. in order they style the top, right, bottom, left. The left on is 210px. This is the space for the column. As you will have noticed I have left a 10px gap. It looks neater when you do this. */
}
Last of all, what to put in the body. It is reasonably simple.
<div id="container">
<div id="column">column content here.</div> /* the float tags must go first or else they will go below the content. */
<div id="content">content here.</div>
</div>
And thats it! Hope that all makes sense and helps. You can obviously customise it how you want. The attached files have a header and footer and I have coloured the feilds making it easier to see the divides.
I will post the document with 2 columns later, don't have time atm.
Dave.
http://www.netfuseuk.com
http://www.daveredfern.com[attachment=1][attachment=1]