Как я могу стилизовать этот макет div с CSS?

Question

Я пытаюсь получить четыре элемента в стиле, как на этом изображении.

Я пытался использовать float:left, но я либо вытащил все div'ы на правой стороне Div1 или все они застряли под 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/

Примечание. Ширина четырех DIV определена в процентах.Важно, чтобы вы не определяли поля, отступы или границы для этих DIV, потому что это могло бы испортить проценты.Если вам нужны отступы и границы, определите их для дочерних элементов.

Answer 2

Поплавки - самый быстрый и гибкий способ с динамическим содержанием высоты.Вы должны взять некоторые вольности с порядком документов.Значение хода div4 после div1 .

См. Пример здесь - http://jsfiddle.net/Wsf53/

Answer 3

Можете ли вы изменить порядок деления?Например, сделать правильный столбец div2?Таким образом, вы можете плавать все влево, кроме div 2, который будет плавать правильно?

---

Да, я могу изменить порядок делений, если это имеет значение.

Тогда я бы упорядочил их так, чтобы вторым делом был правый столбец.А потом что-то похожее на:

#div1{width: 400px; float: left;}
#div2{width: 200px; float: right;height: 600px;}
#div3, #div4{width: 200px; float: left;}
#div3{background-color: green;}

Например: http://dev.tylerc.net/divs.html

Answer 4

#div1 {float:left;}
#div2 { float:left; clear:left;}
#div3 {float:left;}
#div4 {float:right;}

это должно делать то, что вы хотите

Answer 5

Почему вы не создаете div, у которого есть только отец div1 div2 e div3?Вы пробуете это?