How do I make this layout using floats, using just 3 DIV tags?

alt text

1 answer

Travis 0

For fixed widths, just float the red one left, and the brown and blue right, giving each a width.

<div style="background-color:red;float:left;width:66%;"> bla bla bla </div>
<div style="background-color:brown;float:right;width:34%;"> bla bla bla </div>
<div style="background-color:blue;float:right;width:34%;"> bla bla bla </div>

The problem you'll have is when the red div is shorter than the brown div. Just make sure that doesn't happen and you're gold. :)

Answered over 9 years ago by Travis
  • min-height would solve that. Nathan Duran over 9 years ago
  • Not really, unless the brown div was a set or known height. Also, min-height has no ie6 support: Travis over 9 years ago
  • @Travis: There is an ie6 hack you can use for min-height: selector { min-height:500px; height:auto !important; height:500px; } - the order is important as well (ref: Mottie over 9 years ago