clear:both on div inside a 2 column liquid layout breaks everything in FFX.

Question

Use Firefox for this example. (Works fine in IE7)

I have narrowed down an example at: (Where you can do -> view source)

http://www.handbooster.com/example/tricky.html

The problem is that the clear:both attribute on the red div forces it below the left floated blue div. This might well be correct and expected behaviour as that is how FFX renders it.

My problem is that I need to find a way to make the red div be placed directly below "Subheading" BUT I cannot change the clear:both attribute no the red div (as in my case it is rendered by a 3rd party component.)

Is this possible or does the clear:both attribute on the 3'd part component make it impossible to use the component in a floated context as it interfers with other floated elements on the page ?

Answer 1

You can set

#content {
  float: left;
  margin-left: 0;
}

if it's alright to have the content div floated.

Answer 2

What if you position container relatively, and instead of floating the leftnav you position it absolutely?

#leftnav {
    /*float:left;*/
    position:absolute; /* New! */
    left:0px; /* New! */
    margin:0;
    padding:1em;
    width:160px;
}

#container {
    position:relative; /* New! */
    top:0px; /* New! */
    left:0px; /* New! */
    background-color:#FFFFFF;
    border:1px solid gray;
    color:#333333;
    line-height:130%;
    margin:10px auto;
    width:90%;
}