morrispacific
New Member
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:\[code\]<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>\[/code\]The CSS:\[code\]* { 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;}\[/code\]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.