Left-Margin issues with ListItems flowing around a floating block element

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:

Example of the wrong list item margin

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.

score 4 · Accepted Answer · answered Jan 26 '13 at 20:34

4

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

jsFiddle example

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

answered Jan 26 '13 at 20:34

j08691

204,283
31
260
272

Thanks! I only had to set the padding of the UL to 0 to make it consistent, but list-style-position fixed it :-) – Louis Somers Jan 26 '13 at 21:05
1

You saved me extra 5 hours of searching and trying other css rules – Muhammad Ahsan May 01 '13 at 19:00

score 1 · Answer 2 · answered Jan 26 '13 at 21:20

An alternative way that will let you add a margin as well:

ul {
    margin-left:0; list-style-type:none;
}
ul li:before{
    content:"\00A0\25cf\00A0\00A0\00A0";
}

The solution provided by @j08691 is probably still the best option to go with, but the left margins and padding will have to be set to 0 in order to keep spacing consistent.

With this workaround, non breaking spaces can be entered before as well as after the disc.

Left-Margin issues with ListItems flowing around a floating block element

2 Answers2