Positioning H2/IMG/UL in CSS

Tony B

I'm trying to arrange an item
consisting of a H element across the page width,
with an unordered list below on the left, and an image below on the right.
I want to repeat this so I have each item below the previous
H1
UL IMG
H1
UL IMG
H1
UL IMG
......
or
H1
UL
IMG
H1
UL
IMG if page reduced in width

I want each H1/UL/IMG to remain together.

But H always across the top of the group, UL to the left, IMG to the right
if enough width, else below

I've tried loads of ways to use div/span and display inline/block to try to
get this but I'm obviously not understanding CSS.
I could do it with a table easily, but I would like to use CSS ?
Regards
Tony

Apr 3 '07 #1

Christopher Night

On Tue, 3 Apr 2007, Tony B wrote:

I'm trying to arrange an item consisting of a H element across the page
width, with an unordered list below on the left, and an image below on
the right. I want to repeat this so I have each item below the previous
H1
UL IMG
H1
UL IMG
H1
UL IMG
.....
or
H1
UL
IMG
H1
UL
IMG if page reduced in width

I want each H1/UL/IMG to remain together.

But H always across the top of the group, UL to the left, IMG to the right
if enough width, else below

I'm not totally sure I understand what you want, but it sounds like you
should say float:left on the ULs, then clear:left (or clear:both) on the
H1s. Is that not what you have in mind?

-Christopher

Apr 3 '07 #2