Why `float:left` doesn't work with a fixed width?

Question

I have two divs on a webpage and I would like both of them to have a fixed width and would like the first div to be floated to the left of the second div.

This sound

Answer 1

The second element should be inline element.

div.right {
    width: 200px;
    display: inline;
}

If you do not want to make second element inline, just float it to the left too. But your container will collapse. You can fix it using clear:

    
Content
    
Content
    



div.left {
    float: left;
    width: 200px;
    border: 1px solid red;
}

div.right {
    width: 200px;
    border: 1px solid green;
    float:left;
}

#container{
    border: 1px solid black;
}

See example