Proper usage of Floats (For those who love CSS standards)?

Question

I would like to know if I'm using floats in the right way (efficiently) in this code bellow.

There are basically 3 columns (with float left, left and right assigned respectively). Am I using too many floats? Will this cause me problems if I add or delete columns?

This is my index.html:

<div id="content">
 <div id="left-column">
  <h2>left-column</h2>
  <p>
  erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
  Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
  </p>
 </div>
 <div id="main-column">
  <h2>main-column</h2>
  <p>
  erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
  Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
  </p>
 </div>
 <div id="right-column">
  <h2>right-column</h2>
  <p>
  erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
  Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
  </p>
 </div>
</div>

This is my style.css:

#navigation {
font-family: Trebuchet MS;
font-weight: bold;
color: #FFF;
width: 900px;
background-color: #000;
overflow: hidden;
}

#left-column {
margin: 10px 10px 0 0;
width: 150px;
padding: 10px;
float: left; 
color: #FFF;
background-color: #A53030;
}

#main-column {
width:410px;
padding: 10px;
float: left; 
}

#right-column {
width: 260px;
padding: 10px;
float: right; 
}

#footer {
margin-top: 10px;
padding: 5px;
width: 900px;
border-color: #262626;
border-top-style: solid; 
border-width: medium;
clear: both;
}

I added clear: both in the footer because I've seen this in many webpages but I'm not sure why is there because nothing happens if I delete it.

Answer 1

You're doing it right.

You don't need clear: both in your footer because you're clearing your floats the "Correct Way"™. Basically, by setting overflow to hidden, you're avoiding the need to clear your floats in your footer. It shouldn't hurt anything by keeping it in there, but I'd take the clear: both out of the footer style rule. It's not needed.

Answer 2

That is exactly how you're supposed to use them. The clear definition is to say that any other floating content will be placed underneath the "cleared" element. As noted by Dan, it is not necessary there, but if you're going to do floating CSS layouts, it's important to understand what it does.

Answer 3

You should probably just use float: left on all of them. Then you can just use clear:left if you want content to show up below the 3 columns.