HTML and CSS Reference
In-Depth Information
In
Figure 6.10
you can see what happens when the floated element
from one list item bleeds into the following one; things really start to
go haywire.
Figure 6.10
The effect of
floated elements
extending past its
parent element
into the following
content.
li {
border: 1px solid #000;
}
img {
float: left;
margin-right: 0.5em;
}
[...]
<ul>
<li>
<img src="images/1.png" width="67" height="67"
➥
alt="1" />
<p>Here is some text associated with the first list
➥
item</p>
</li>
<li>
<img src="images/2.png" width="67" height="67"
➥
alt="2" />
<p>Here is some text associated with the second list
item</p>
</li>
