Height expand with contents

I have the following horizontal menu:

<nav style="min-height: 50px">
    <ul>
        <li style="display: inline;">
            <a hr开发者_C百科ef="" 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?

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.

Use inline-block instead of float-left;

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

A good replacement for <br style="clear: both;" /> is to add overflow: hidden to #nav.

Follow this link for min-height working in all browsers: http://www.dustindiaz.com/min-height-fast-hack/

<nav style="display: block">
    <ul style="display: block;">
        <li style="display: inline-block; float: left">
            <a href=""> Link text</a>
        </li>
          <li style="display: inline-block; float: left">
            <a href=""> Link text</a>
        </li>  
    </ul>
</nav>