HTML and CSS Reference
In-Depth Information
Now the container expands to fit all the child elements. But unfortunately
this fix will only work in a limited number of circumstances, since floating the
parent may have undesirable e
"
ects on your layout.
SOLUTION 2: ADDING EXTRA MARKUP
This is an outdated method, but is an easy option. Simply add an extra
element at the bottom of the container and “clear” it. Here's how the HTML
would look after this method is implemented:
<div id="container">
<img src="http://media.smashingmagazine.com/wp-content/
uploads/2009/10/lifesaver.jpg" width="200" height="222"
alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu
libero sit amet quam egestas semper.</p>
<div class="clearfix"></div>
</div>
And the resulting CSS applied to the new element:
.clearfix {
clear: both;
}
