Question

I have the following horizontal menu:

<nav style="min-height: 50px">
    <ul>
        <li style="display: inline;">
            <a href="" style="float: left;">Link text</a>
        </li>
        ...
    </ul>
</nav>

I want the <nav> element height to expand with its contents. Now to fix this I could do something like this:

<nav style="min-height: 50px">
    <ul>
        <li style="display: inline;">
            <a href="" style="float: left;">Link text</a>
        </li>
        ...
    </ul>
    <br style="clear: both;" />
</nav>

This “fix” doesn’t look right to me semantically, so is there a cleaner way of achieving the same effect?

Answer 1

There are indeed more elegant solutions to this phenomenon. The problem is that without help, the parent container does not expand to enclose floated child elements. See also another of my answers on the topic.

You could use the :after pseudo class – add this to your CSS:

nav:after {
    content: ""; display: block; height: 0; clear: both;
}

or you can use the solution with overflow: auto as described here.