Web Design with HTML and CSS

A brief history of layout techniques on the web

Lesson 7, Introduction to CSS Layout 153

Creating columns with the fl oat property

You will apply the fl oat property to the sidebar and main content divs to see how they are

aff ected.

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

#sidebar {

fl oat:left;

width:300px;

background-color:#CCC;

}

Save the page and preview it in your browser. The page has become “broken”; however,

you must learn to recognize the reasons behind a “broken” page such as this one, because

this behavior teaches you how fl oats work.

When you fl oat an element (in this case, the sidebar div), it is removed from the
normal fl ow of the HTML. This is why the sidebar extends over the entire container.The
two divs that have content are contained within boundaries of the sidebar.

The sidebar is fl oated, but is also overlapping the boundaries of other page elements.

However, this containment can be deceptive because it is aff ected by the amount of

content in each div. To illustrate, you will add more content into the main div by

duplicating the current paragraph.

2 In your HTML, select the entire paragraph element and press Ctrl + C (Windows) or

Command + C (Mac OS) to copy it. Click once after the element and press Ctrl + V

(Windows) or Command + V (Mac OS) to paste it.

3 Save the fi le and then preview it in your browser. When additional content is added to

the main div, it expands and pushes the footer div downwards. Now the footer div

appears below the sidebar because there is space for the div above it. Close your browser

and return to your text editor.