Question

I have a very basic two column layout. The first column has a background color of white, the second is green. I’m doing it very simply via:

#col1 { 
  background-color: white; 
  float: left; 
}

#col2 { 
  background-color: green
}

<div id="col1">

</div>
<div id="col2">
  <!-- green background, and needs to fill up the remaining width, so i can't float left */ 
</div>

Why does column two span across the entire width of the page and sit behind column one? I’d just like two columns, one of a fixed width, the second one to use up the rest of the page.

Seems so simple. Is there a better way to do this?

Here’s a fiddle:
http://jsfiddle.net/yrkrJ/1/

Answer 1

Because you define float to your first DIV. So, the second div is not recognized the height. Write like this

#col2 {
    overflow:hidden;
}

Check this http://jsfiddle.net/yrkrJ/4/

Read this for more http://www.quirksmode.org/css/clearing.html