Question

I’m trying to get four divs styled as in this image.

I’ve tried with using float:left but I either get all the divs stuck up on the right side of Div1
or all of them stuck underneath Div1. I believe I need to do a clear somewhere, is that right?

NB.
Div2 and Div3 may be different heights.

Updated.
Thankyou for the answers so far, they are almost what I needed. To add to the question, is it possible to get this look when the DivContainer doesnt have a fixed width?

Answer 1

Here you go:

#wrap { width:730px; overflow:auto; padding:20px; }
#div1 { width:500px; float:left; height:200px; margin-bottom:20px;  }
#div2 { width:237px; float:left; clear:left; height:150px; margin-right:20px; }
#div3 { width:237px; float:left; height:170px; }
#div4 { width:200px; float:right; height:500px; }

Live demo: http://jsfiddle.net/simevidas/MNjyg/show/

---

Update:

#wrap { overflow:auto; }
#div1{ background:yellow; width:70%; float:left;  }
#div2{ background:red; width:35%; float:left; clear:left; }
#div3{ background:green; width:35%; float:left;  }
#div4{ background:blue; width:30%; float:right; }

Live demo: http://jsfiddle.net/simevidas/Cm7b7/6/

Note: The 4 DIV’s have their widths defined in percentages. It is important that you don’t define margins, padding, or borders on those DIV’s because that would mess up the percentages. If you need padding and borders, define them on child elements instead.