CSS Layout
The layout of a site is a very important decision and must be made early on in the development lifecycle as the media you create for inclusion on your site must be precisely sized to fit the layout. Always plan this phase of development on paper and include dimensions which will assist you in all aspects of planning and development.

Ice example - The size and position of the site is fixed.
Jello example - The size is fixed but free to move with the available space.
Liquid example - Flexible size and position making the most of all available space.

Modern site layout is all about the positioning of <div> elements using CSS which is a far more flexible and dynamic site creation method than using HTML alone.

The following is the code for the creation of a relatively positioned <div> element. That is an element positioned relative to the surrounding content.

<div style="position:relative; width: 200px; height:150px; background-color: green"></div>


Next we will place another element to represent the header of the document and within the <div> to create a level of nesting. That is one <div> within another <div>. When we do this we are said to be nesting elements and the container or first <div> is said to be the parent to the second <div> or child <div>.

To achieve this we create another <div> between the opening and closing tags of the parent <div>.

Note the use of position: absolute, this gives us full control of the position of the second <div> based on the container object or first <div>. This is not really necessary in this case as the header would have automatically slotted itself into the first available space which is the top left corner.

<div style="position:relative; width: 200px; height:150px; background-color: green">
<div style="position:absolute; width: 200px; height:20px; background-color: red"></div>
</div>


We will now add an element to act as a side menu by adding another <div> tag which will be nested at the same level as the red header. Note the use of the top attribute to push the element down the page by the same size as the header.

<div style="position:relative; width: 200px; height:150px; background-color: green">
<div style="position:absolute; width: 200px; height:20px; background-color: red"></div>
<div style="position:absolute; width: 35px; height:130px; background-color: white; top:20px"></div>
</div>


The last element we need to add to our simulated page is an area for content to be displayed. This is achieved as before by nesting another <div> tag at the same level as our other child objects and as well as having a top attribute set we also set the left attribute to push the <div> away from the left of the container by the same amount of space that the side menu takes up.

<div style="position:relative; width: 200px; height:150px; background-color: green">
<div style="position:absolute; width: 200px; height:20px; background-color: red"></div>
<div style="position:absolute; width: 35px; height:130px; background-color: white; top:20px"></div>
<div style="position:absolute; width: 165px; height:130px; background-color: silver; top:20px; left:35px;"></div>
</div>


We can now add some content to our micro-site by placing a paragraph between the opening and closing<div> tags of the silver section.


Here is some content for our micro-site and as you will notice I have not planned ahead very well and now i have stretched my <div> so it is way larger than I ever intended. Sometimes this can be a technique utilised to have flexible pages but more often than not it is undesirable.

 

 

 

 



To get round this problem we add a new CSS property to the offending <div> called overflow and set it to auto to add scrollbars to the div.

overflow:auto;

That's more like it now I can waffle on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on without a care for the initial size of the <div> tags I created.

Next: Layout using the CSS box model