Re: Insufficient margins/padding for list-items/quotes/etc. next to floats

> Look at the following document:
>
> data:text/html,<!doctype html><div style="float:
> left;padding:1em;margin:0 1em 1em 0;border:1px solid
> black;height:5em">Floated text</div><ul><li>Badly-displayed
> bullet</li></ul><p>A paragraph.</p><ul
> style="clear:left"><li>Properly-displayed bullet</li></ul><p>Another
> paragraph</p>
>
> The first bullet looks wrong: it's not indented relative to the
> surrounding text.  This is because the extra padding is left behind
> the float, and doesn't actually push the text (or bullet) out past the
> surrounding text.  This problem arises pretty commonly on Wikipedia.
>
> Currently there's no good solution that I can think of.

This happens since the marker box is appearing outside of the  
principal box. You could set the marker box so that it appears as the  
first inline box within the principal box, by applying 'list-style- 
position:inside' - or I may not be understanding your issue correctly?

Received on Sunday, 27 December 2009 00:41:27 UTC