Avoiding image covered by list

HTML & CSS
1

i have this page where the list is covered by the image itself. what’s the best way to avoid this in the code?

2

You need to clear the floated image.

Try giving the OL clear:left; OR the paragraph which contains the image, overflow:hidden;

3

i have considered giving OL a clear:left, but the problem is that it now looks awkward having a list beneath the image. I’ve tried a few different ways but can’t find one that suitable yet.

4

If you want the list to wrap around the image then you could remove the clear:left but set the ol to list-style-inside which will keep the marker clear of the image.

e.g.


ol.classname{
list-style: decimal inside ;
}

It turns the marker into an inline element so you won’t get the same indent effect though but wraps a lot neater.

5

just tried that but i don’t think that works

6

Ok, giving the OL “overflow:hidden;” may be your best option. It should narrow down the width of the list automatically, the white space will be on the left of the list. Essentially you will have created a “column” for the image… the white space HAS to go SOMEPLACE.

7

You didn’t remove the clear:left from the list.

Ok, giving the OL “overflow:hidden;” may be your best option.

That will create a column to the side -which may be what the op wants but the text won’t wrap. You would also need haslayout for ie7 and under of course :wink: