Question

I have 4 divs in a fixed width layout: a, b, c, and d, and they are ordered in the html like this:

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

Using CSS, I want them to be laid out with divs a, b, and d in a vertical column, and div c to the right of and top-aligned with div b, like this:

aaa
aaa
aaa
bbbccc
bbbccc
bbbccc
ddd
ddd
ddd

I need this layout to work even though the divs contain unknown content, and so could be of varying length:

aaa
aaa
aaa
bbbccc
bbbccc
dddccc
dddccc
ddd

or:

aaa
aaa
aaa
bbbccc
bbb
bbb
ddd
ddd
ddd

or even (if possible):

aaa
aaa
bbbccc
dddccc
eeeccc
eee

I can’t simply float div c to the right and then move it up, because, without using Javascript, I don’t know the height of div b, and so don’t know how much to move it up by.

Is this possible in HTML and CSS, without reordering the divs?

Answer 1

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

Would probably solve it (not tested).