如何用css设置这个div布局的样式？

Question

我试图在这张图片中设置四个div.

我尝试过使用float:left但是我要么把所有的div都放在Div1的右侧,要么所有的div都被卡在Div1下面.我相信我需要做clear某个地方,是吗？

NB.Div2和Div3可能有不同的高度.

更新.
谢谢你到目前为止的答案,他们几乎是我需要的.要添加问题,当DivContainer没有固定宽度时,是否可以获得此外观？

Answer 1

干得好:

#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; }

现场演示: http ://jsfiddle.net/simevidas/MNjyg/show/

更新:

#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; }

现场演示: http ://jsfiddle.net/simevidas/Cm7b7/6/

注意:4 DIV的宽度以百分比定义.重要的是你不要在那些DIV上定义边距,填充或边框,因为这会弄乱百分比.如果需要填充和边框,请在子元素上定义它们.