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: 177
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