How to Understand CSS - Part One of Series - Clear Float

Before and After the CSS clear float property

Rate: (0 Ratings)

The first of a series of "How To's" to teach you how to work with CSS and XHTML. This will teach you what the clear float class will do for your web page.

Flag Article

Instructions

Difficulty: Moderate

Things You’ll Need:

Some prior knowledge of laying out your web page with CSS (http://www.kperspectives.com)
HTML / CSS editor - I will be using Dreamweaver
Computer

Step1

How your page will look with two columns Layout your website with a wrap div and within that wrap place a left column that floats to the left and a right column that floats to the right. I have used a fixed width of 800 pixels. If you would like code to copy for this step please go to www.kperspectives.com/Dreamweaver/code_twocolumns.html

Step2

Footer is in red: Notice that it does not stay to the bottom when the left column has content added to it and grows longer. Now add a footer div tag below the right and left column but before the close of the wrap div. Go inside of the left column and hit enter a few times - as if you were adding content. Notice the footer does not stay below the left column.

Step3

In this step we will add the clear float rule and set the properties. You need to add a new style rule to your document as a class. Name it .clearfloat. Add a rule to the class - "clear:both." In Dreamweaver CS3 the clear both rule is in the box category in the CSS rule box.

Step4

Notice the red footer is now at the bottom of the page. Now you need to add the code for the .clearfloat class to the correct place in your document. The .clearfloat code should go right before the opening of the footer div tag. Make sure you add it as a class and not an id. For a look at the complete, finished, code please go to www.kperspectives.com/Dreamweaver/code_clear_float.html.

Tips & Warnings

To get to the code samples that go with this tutorial go to www.kperspectives.com/Dreamweaver/free_tutorials_css_clear_float.html.
The tutorial shows you CSS that is on the same page as the XHTML - however it is best to create external CSS Style Sheets
The white space you notice between the columns and the footer is caused by the automatic margins on the paragraph tag. For more information on how to control that you can go to www.kperspectives.com/Dreamweaver/free_tutorials.php