Question

I have a floating block element and an unordered list of items flowing around it. The margin of the listItems seems to overlap the floating element.

Here is a simplified example:

<p>some text</p>
<div class="leftcaption">image with caption</div>
<p>some more text, now comes a list</p>
<ul>
    <li>Item (bad left margin)</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item (correct left margin after the caption div)</li>
</ul>

The CSS:

* { margin:5px; }
ul {
    list-style-type:disc;
    margin-left:30px;
}
.leftcaption {
    float:left;
    margin: 5px 5px 5px 0;
    /* just to make it look like a real caption: */
    background-color: #DDD;
    width:100px;
    height:100px;
}

This is what it looks like:

One workaround would be to make the unordered list a block level element, but then it would no longer flow, and in addition, it would be pushed down if there was also a block floating to the right.

Answer 1

Add the list-style-position:inside; rule to your CSS.

jsFiddle example

ul {
    list-style-type:disc;
    margin-left:30px;
    list-style-position:inside;
}