ACTIVITY:
CREATING A LIQUID THREE-COLUMN PAGE LAYOUT USING FLOATS
In this exercise you will float left and right columns to achieve a three column layout with a header and a footer.
Start with the semantically marked up code
To lay out a page into three columns, you need to start with the basic page structure. In this case you will use some dummy content to create a three column template. The page has been grouped into six separate divs and each of these divs has been given a unique ID selector. The divs are labelled "container" (wrapped around the entire page's content), "top" (for the top banner), "leftnav" (for the smaller, left column), "rightnav" (for the smaller, right column), "content" (for the main content) and "footer" (for the footer across the bottom of the page).
Note: It is better to name classes and id's based on their meaning, rather than their appearance.
HTML CODE:
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
</div>
<div id="rightnav">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
Your page so far:
Add width and margin to the container
To get the content to sit in from the edge of the browser window you need to set width and margins on the container div that wraps around the content.
In this case you will use a width of 90%. Thus, the CSS declaration used is: "width: 90%". Any width could be used - including 100% - which would force the content to the left and right edges of the browser window.
To centre the div in the browser window, we apply "auto" margins to left and right. To move the div away from the top and bottom of the browser window we use a margin of 10px. These can be combined into one shorthand CSS declaration: "margin: 10px auto". This will apply a margin of 10px to the top and bottom and auto margins to the left and right.
Some browsers (particularly older versions of IE) do not support the auto left and right margins. However, with the addition of two simple rules, these browsers will center the containing block
CSS CODE:
#container {
width: 90%;
margin: 10px auto;
}
Add color, background color and border
To add colour and background colour to the main div, use "background-color: #fff;" and "color: #333".
To apply a border to the div, use "border: 1px solid gray;".
CSS CODE:
#container {
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
}
Your page so far:
Add line height
To increase readability, you can increase the overall line-height of text. If it is applied to this main div, it will cascade down throughout all divs below. The rule can be written as "line-height: 130%;".
CSS CODE:
#container {
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
Styling the top banner
To style the top div, we will set a background colour, padding and a border across the bottom. The three declarations will be: "padding: .5em;" to add padding to the div, "background-color: #ddd;" to add a background color and "border-bottom: 1px solid gray" to apply a border to the bottom of the div.
CSS CODE:
#top {
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
Your page so far:
Remove margins and padding from the h1
Inside the top banner there is an H1 tag. We want the words to sit .5em in from the top and left edge of the div. Browsers add different amounts of padding above an h1, it is easiest to remove all padding and margin from this h1 and let the div provide the padding. This is achieved by using a descendant selector - "#top h1 {padding: 0; margin: 0;}".
CSS CODE:
#top h1 {
padding: 0;
margin: 0;
}
Apply "float" to the leftnav
To float the left nav, we need to use the rule: "#leftnav {float: left;}". When a div is set to float, a width must also be included, so we can add another declaration: "width: 160px;".
CSS CODE:
#leftnav {
float: left;
width: 160px;
}
Add margin and padding to the leftnav
Next, we set the margin to "0" add 1em of padding (which will move the text away from the edges of the div).
CSS CODE:
#leftnav {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
Your page so far:
Apply "float", margin and padding to the rightnav
To float the "rightnav" div, we need to use the rule: "#rightnav {float: right;}". Like the "leftnav" div, we add a width, margin and padding.
#rightnav {
float: right;
width: 160px;
margin: 0;
padding: 1em;
}
Setting margins to the "content" div
This next step is the most important of the entire process. The "leftnav" div has been floated and, thus, text from the "content" div will flow down its left edge and then wrap around under it. To make the text appear as it is in a new column, we apply margin-left to the "content" div making sure that the width is greater than the overall width of the "leftnav" div. In this case, we will use "margin-left: 200px", which will give us 40px margin between the leftnav and the main content. The same is done to the right side.
We will also apply a border to the left of the "content" div. This could be a problem if the "leftnav" div is longer than the main content. If this is the case, the border can be applied to the right side of the "leftnav" div instead of the "content" div.
CSS CODE:
#content {
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
}
Your page so far:
Add padding to the "content" div
To add padding to the content div use "padding: 1em;".
CSS CODE:
#content {
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
}
Styling the footer
To style the footer, we first need to set it to "clear: both". This is critical, as it will force the footer below any floated elements above. We then add "padding: .5em" and "margin: 0".
CSS CODE:
#footer {
clear: both;
margin: 0;
padding: .5em;
}
Add colour and background colour to the footer
To add colour and background colour to the footer use the following declarations: "color: #333;" and "background-color: #ddd;".
CSS CODE:
#footer {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
}
Add a border to the footer
To add a border to the top of the footer use "border-top: 1px solid gray;".
CSS CODE:
#footer {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
Your page so far:
Removing top margins
To remove the space above content in the "leftnav" and "content" divs, use the following rules: "#leftnav p, #rightnav p { margin: 0 0 1em 0; }" and "#content h2 { margin: 0 0 .5em 0; }".
Browsers use different amounts of margin above paragraphs and headings. It is safe to remove all top margins, as long as there are bottom margins to keep the paragraphs and headings separate from elements below them.
CSS CODE:
#leftnav p, #rightnav {margin: 0 0 1em 0; }
#content h2 {margin: 0 0 .5em 0; }
Setting a maximum line length
If you want to set a maximum width on your main content, you can do this by adding a new rule: "#content { max-width: 36em; }".
Although IE browsers will ignore this rule, other standards compliant browsers will not allow the content area to go wider that 36em - keeping the line length to a comfortable width.
CSS CODE:
#content {
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em;
}
The final page:
Activity - Creating a 3-Column Layout Using Floats.doc Version 1
Page 13 of 13