positioning snag

Rischen

Hi,

I've got a strange snag that I can't figure though I've looked at it a hundred ways.

I've got a site-wide css stylesheet three column layout with navigation on the left, links on the right and content in the middle.

On one of the pages I've got a five step guide with diagrams in the content column. Using css I've floated the diagrams left so that the description text of each diagram is on the right and each little step is headed by an h2.

Sorta like this

STEP ONE

|image| Text text text
|image| text.
|image|

STEP TWO

|image| Text text text
|image| text text text.
|image|

etc.

But floating the images left makes the h2 header of the next step also wrap around the image if the description text next to the image doesn't go beyond the image.

STEP TWO

|image| Text text text
|image| text text text.
|image| STEP THREE


I've tried a hundred things. I've given the h2's a clear:left class but that does this odd thing and creates a gap in the border I've got around this content column. I've tried putting each step in a div that clears but it does the same kind of thing. When I've got a situation where the text passes the image

STEP TWO

|image| Text text text
|image| text text text
|image| text text text
text text text
text text.

then the h2 obviously gives itself its default margin from the last bit of text and the layout is cool but when the text doesn't pass the image then the h2 wraps around the image because it's floated.

How can I have the image left with the description right of it but have the next h2 place its default margin between the image and itself so its like 'Sorta like this' above?

I appreciate your time on this,

Rischen

CannonBallGuy

Try magin:XXpx with whatever you want the margin to be...
If that doesnt work, try to position the heading relevant to the image...

Python

^^ I think you mean margin:XXpx - replace XX with your size in pixels

CannonBallGuy

yeah. lol. Dumb typo's >:(
:P thanks.

kink

try <br> if all else fails