UL overlap, float:left image [duplicate]

Question

Possible Duplicate:
Why do my list item bullets overlap floating elements

I've been having this problem with ul's next to a floating image

Here is the code i've been using

<img src="abc.jpg" width="300" height="375" style="float:left;" /> Hello world isn't this amazing
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <!--list shortened for readability-->
</ul>
<p>Extra sample text here</p>

Result

If it's changed to

<ul style="overflow:auto;">

The list carries on past the image, not what i want

Also trying this below gives the wrong result

<ul style="list-style-position: inside;">

Photoshop of what i want

Daniel

Please clarify on what you are trying to achieve. What is the question? – Thug

I added a photoshop of what i want as that last image the purple sections is where it moved from – Daniel

Answer 1

While using list-style-position: inside on the , also remove the padding-left of . The padding is usually defined by the browser. As an alternative, you could leave list-style-position: outside and increase the margin-left of until the bullets aren't overlapping.

Benally

There didn't seem to be any padding-left also i want the bullets below to not have a large padding-left – Daniel

I checked an example I once worked with where I had the exact same problem and there simply was no nice solution. I ended up using overflow: hidden on the <ul> with list-style-position: outside, just like in your 2nd example. – Benally

Answer 2

you can put the ul inside a div and make the div float left after the image

Priapic

That resulted in dl.dropbox.com/u/454062/ZScreen/2012-03/… – Daniel

Answer 3

This is a great reference for how CSS works: CSS2.1#floats

<ul> is a block element so you can make the float next to the image without any extra div like so using inline styles:

<ul style="float:left;">

Permissible

Answer 4

The simplest way is to add margin-right: 20px; to your image. Or, if you need to move only your list and leave the surrounding text in place, add margin-left: 40px; to the <ul>.

Thug

Answer 5

Another fugly, but working solution is to put each li in a separate ul, and set overflow:hidden on the uls, like so: http://jsfiddle.net/xA9n8/

Erivan