drkdidel.be

CSS: make a container wrap around its floating children

When an element contains floating elements, its height does not include the height of the floating elements because they are outside the natural flow of the document. To make the container aware of all the heights inside it, we can use the overflow property:

HTML:
<p>
    <a class="floatRight">I am floating!</a>
</p>

CSS:
p {
    overflow:auto;
}
a.floatRight {
    float:right;
}

Back