Menukit Tutorial - Centered Scalable Layout using divs

Centered Scalable Layout using <div>'s

Objective

We want a centered page with a header at the top and a footer at the bottom. The footer should be positioned at the bottom of the viewport/screen when the page is shorter than the screen but it should remain tied to the bottom of the page when the page is longer than the screen.

Create a local site for this tutorial. Download the support files for this tutorial. Create an empty site and copy the support files into it. Start Dreamweaver and open the start page, 1colDivs_start.htm.
Commentary on the 1colDivs_start.htm page.
The divs in 1colDivs_start.htm have temporary borders and some filler text just to make them easy to see in a browser. We will delete these borders and text in a moment.
The start page contains a labelled <div> for each of the three main areas: 'header', 'footer' and 'content' as shown in the diagram below.
These 3 divs are enclosed in a 'wrapper' div. The 'wrapper' div allows us to keep the 'footer' div positioned at the bottom of the page when the page is longer than the screen.

We position the 'footer' div absolutely at the bottom of the 'wrapper' div.
The 'min-height: 100%' attribute ensures that 'wrapper' is at least as high as the screen but it can grow to the height of the page when the page is longer than the screen.

* Warning! IE6 does not understand 'min-height'.
As far as IE6 is concerned, since 'wrapper' has no height and no width specified, it does not establish a positioning context for 'footer'. Therefore, IE6 positions 'footer' absolutely in the next outer block, <body>, in this case.
That doesn't matter at this stage since the footer is still positioned where we want it - at the bottom of the page. But we will have to include a fix in a moment after we assign a width to 'wrapper' because the presence of the 'width:' style will cause IE6 to see 'wrapper' as a positioning context.
The 'wrapper' div, which contains the 'footer' div, establishes a positioning context* for the 'footer' div in this case because it is positioned relatively and has a height (actually min-height*) assigned to it.
Annotated source code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Centered Scalable Layout using <div>'s</title>
<style type="text/css">
html {
height: 100%;
}

Browsers make the body element only as high as is needed for the actual page contents - they do not stretch the height to fill the browser window (more correctly, the viewport). We can force the <body> to stretch to 100% of the screen by giving it a height of 100% with a style specification. In some browsers, the <body> gets its height from the <html> element rather than from the screen. To cater for these browsers we also give the <html> element a height of 100%.
body {
margin: 0;
height: 100%;
}

Note The '#wrapper' element includes the attribute 'position: relative'. That makes 'wrapper' the positioning context for 'footer'.
Why is this important?
(Does not apply to IE6)
If 'wrapper' were not the positioning context (eg. if its 'position' had been 'static' or omitted altogether) then the footer would be positioned at the bottom of the next outer containing block i.e. the <body> element in this case. Since <body> has been given a height of 100% (the height of the screen), the footer would always appear at a fixed position on the page equal to the height of the screen regardless of the actual size of the page - not what we want.
#wrapper {
position: relative;
min-height: 100%;
background: #FBFBFF;
color: #000033;
border: 1px solid yellow;
}
#header {
height: 6em;
border: 1px solid blue;
}
#content {
border: 1px solid orange;
}
#footer {
position: absolute;
bottom: 0;
height: 4em;
width: 100%;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"> Header area</div>
<div id="content"> Some text in the content area.
... </div>
<div id="footer">Footer area</div>
</div>
</body>
</html>
1colDivs_start.htm
Add a shim to keep the footer below the flowed content.Since the footer is absolutely positioned it is removed from the document flow and does not affect where any of the flowed content is placed. In other words its presence is ignored. To see the effect of this, view the page in a browser and try dragging the bottom of the browser window up and down.
Now delete the temporary borders (they are commented as 'temporary' in the source). After you remove these borders you can make the browser's vertical scrollbar disappear completely by dragging the bottom of the window downwards until it is below the flowed content. Now move the bottom of the window upwards and notice that the vertical scrollbar becomes visible again as soon as the bottom of the window (NOT THE FOOTER) touches the bottom of the flowed content.
This reveals a small problem that we must fix...
...the footer, being tied to the bottom of the window, is also moved up and overlaps the lower part of the content. Actually, it overlaps the main content area to a height of 4em, the height of the 'footer' div.
Note. 'static' is the default value of 'position' so we can just omit it from the stylesheet element.
A simple way to fix this is to insert a spacer div (a 'shim' in mechanical engineering terms) into the flow at the bottom of the 'wrapper' div. This spacer div must have the same height as the footer AND IT MUST BE FLOWED content i.e. its position attribute must have the value 'static'. Add the shim just before the footer div like this:

Note. The 'footer' div is absolutely positioned and has no effect on flowed content inside the 'wrapper' div. Therefore it doesn't matter whether we place the shim (flowed) before or after 'footer' in the source code as long as we place it inside the 'wrapper' div.
vel lorem.</div>
<div class="shim"></div>
<div id="footer">Footer area</div>
</div>

Make the shim the same height as the footer:

Here we used a class selector rather an ID selector because we may need to use a similar shim elsewhere.
.shim {
height: 4em;
}

If you are not sure about how the shim works, just give it a temporary background color and you'll be able to see its effect as you drag the bottom of the screen up and down.

.shim {
height: 4em;
background: #CCCCCC; /* temporary background color */
}

Your page should now look like page 1colDivs_inter.htm which you can find in the support files.
Set background colors for header, content and footer areas.We have already set the text and background colors for the main content area by setting them for the wrapper <div>. Now we can apply colors to the header and footer like this:

#header {
height: 6em;
background-color: #000059;
color: #F2F2FF;
}

#footer {
position: absolute;
bottom: 0;
height: 4em;
width: 100%;
background: #80A7E0;
color: #000033;
}
Reduce width of page and center it.
Set the width of the wrapper to 95%. Set the left and right margins of the wrapper div to 'auto' so as to center the wrapper within the page body.

#wrapper {
position: relative;
width: 95%;
margin: 0 auto 0 auto;
min-height: 100%;
background: #FBFBFF;
color: #000033;
}

Give the body a dark background color that form the side margins for the wrapper.

body {
margin: 0;
height: 100%;
background: #999999;
}

It no longer looks right in IE6
If you view the page now in IE6 you will see that the footer is no longer tied to the bottom of the window.
What has happened to IE6 and how can we fix it?
Since it now has a width specification, the 'wrapper' div has become a positioning context and the footer is positioned absolutely at bottom.
IE6 considers the 'wrapper' div to have no height specification (it does not understand min-height) and so it determines the height of 'wrapper' from its contents.
If we set the height of 'wrapper' to 100% then it ill inherit the height of its parent, the browser window. In fact, it happens that IE6 interprets 'height' as 'min-height' and as a result, the height of 'wrapper' will increase to the length of the page when the page is longer than the screen.

But there is a potential problem.

If we set the height of 'wrapper' to 100% like this...

#wrapper {
position: relative;
width: 95%;
margin: 0 auto 0 auto;
height: 100%; /* Don't do this! */
min-height: 100%;
background: #FBFBFF;
color: #000033;
}
... then it will break the solution we developed above for browsers that implement the standard interpretion of 'height'.
So, we enclose the 'height' style in a conditional comment so it is seen only by IE6:



Your page should now look like page 1colDivs_final.htm which you can find in the support files.
Now you can delete the temporary filler text from the various divs to make an empty centered layout, 1colDivs.htm ready to receive content.

Menukit

A Dreamweaver Extension

for making different types of Menus