Как я могу расположить боковую панель или вывести цитату?

Question

У меня есть 4 div в макете фиксированной ширины: a, b, c и d, и они упорядочены в html следующим образом:

<div id="a">
</div>
<div id="b">
</div>
<div id="c">
</div>
<div id="d">
</div>

Используя CSS, я хочу, чтобы они были размещены с divами a, b и d в вертикальном столбце, и div c справа от div и выровнены по верхнему краю с помощью div b, например:

aaa
aaa
aaa
bbbccc
bbbccc
bbbccc
ddd
ddd
ddd

Мне нужен этот макет, чтобы он работал, даже если в div содержится неизвестное содержимое, поэтому он может иметь различную длину:

aaa
aaa
aaa
bbbccc
bbbccc
dddccc
dddccc
ddd

или

aaa
aaa
aaa
bbbccc
bbb
bbb
ddd
ddd
ddd

или даже (если возможно):

aaa
aaa
bbbccc
dddccc
eeeccc
eee

Я не могу просто плавать div c вправо, а затем перемещать его вверх, потому что, не используя Javascript, я не знаю высоту div b, и поэтому не знаю, на сколько его увеличить .

Возможно ли это в HTML и CSS, без изменения порядка в div?

Answer 1

a {
  clear: both;
}
b {
  float: left;
}
c {
  float: right;
}
d, e {
  clear: left;
}

Возможно, это решит (не проверено).