Web Design with HTML and CSS

154

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

4 These three divs (sidebar, main, and footer) currently appear to be interdependent.

Removing (or adding) content from the sidebar also has an eff ect. In your HTML, select

the last paragraph within the sidebar and delete it. Save the page and preview it in your

browser. Now that the height of the sidebar is shorter than both the footer and the

main divs, they “fl ow” beneath it. This can lead to some layout problems; you will learn

strategies for solving these problems in a later section, but now, you will fl oat the main

container as well.

5 Close your browser and return to your text editor. Press Ctrl + Z (Windows) or

Command + Z (Mac) to undo the deletion of the paragraph in the sidebar. Additionally,

select the paragraph in the main div that you duplicated in step 2 and delete that as well.

6 Add the following selector and style rules (highlighted in red) below the #sidebar rule:

#main {

width:600px;

fl oat:right;

background-color:#ADA446;

}

Save the fi le and preview it in your browser.

The main div fl oats to the right, but the footer has moved upwards in the fl ow of the page.

Floating this div to the right solves the problem of the content appearing below the

sidebar; however, the amount of content in the main div forces it to extend outside the

entire container. This is a problem when you consider the footer element: footers should

appear at the bottom of the page, and this one is not.

To force the footer div to the bottom of the page, you will assign a new property called

clear to this div.