Graphical Backup for "Lists Around Floats" Suggested Solution

This page contains merely images. For a textual description see the www-style archives.

Diagrams with Margin and Padding lines

When There Are No Floats

When There Are Floats, As The Spec Says Now

When There Are Floats, As The Suggestion Would Make It

Diagrams without Margin and Padding lines

When There Are No Floats

When There Are Floats, As The Spec Says Now

When There Are Floats, As The Suggestion Would Make It

Markup

CSS

   DIV { margin: 7px; padding: 6px; border: 2px black solid; 
         background: #F6E574; counter-reset: LI; }
   P   { margin: 6px 6px 6px 50px; font: 12px Verdana;
         line-height: 20px; background: 81ADF5; color: white; 
         border: 1px solid black; }
   P:before
       { padding: 4px; display: marker; marker-offset: 8px; 
         content: counter(LI, upper-alpha); counter-increment: LI; }
   IMG { float: left; margin: 23px; width: 44px; height: 32px;
         border: solid 1px black; background: #0AA505; }

HTML

   <DIV>
     <IMG src="greenbox.png" alt="">
     <P>This is the first line
     box of the first LI in
     this list.</P>
     <P>This is the second LI
     in this list.</P>
   </DIV>

See the relevant www-style post.