How can I layout a sidebar or pullquote?

Posted by Rich on Stack Overflow See other posts from Stack Overflow or by Rich
Published on 2010-05-21T11:40:29Z Indexed on 2010/05/21 11:50 UTC
Read the original article Hit count: 173

Filed under:
|

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?

© Stack Overflow or respective owner

Related posts about css

Related posts about html