Left margin issues with ListItems flowing around a floated item
I have a floating box element and an unordered list of elements wrapping around it. The margins of the listItems seem to overlap the floating item.
Here's 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>
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;
}
It looks like this:
One way would be to make the unordered list a block-level element, but then it won't flow anymore, and furthermore, it would be pushed down if there was also a block floating to the right.
+3
source to share
2 answers
An alternative way that will allow you to add margin:
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, but the left margins and padding should be set to 0 to make the spacing consistent.
This workaround, as with a disk, can introduce unused spaces.
+1
source to share