CSS 3 columns, why is the third column taking over the other 2?

Posted by Matt Dawdy on Stack Overflow See other posts from Stack Overflow or by Matt Dawdy
Published on 2010-04-01T20:26:10Z Indexed on 2010/04/01 20:53 UTC
Read the original article Hit count: 113

Filed under:

Here is the smallest amount of code that clearly illustrates my problem:

<html>
<body>
    <div style="float: left; width: 200px;">One</div>
    <div style="float: left; width: 200px;">Two</div>
    <div style="background-color: #f0f;">Three</div>
</body>
</html>

The first 2 divs are supposed to be 2 left columns. The 3rd should take up the rest of the page. Eventually, I'm going to add options to hide and show the 2 columns on the left.

But, why is the color purple extending all the way to the browser's left edge? I am trying to get it to start at the word "Three".

© Stack Overflow or respective owner

Related posts about css-layout