How to make an element strech to the same height as the content within it?

Question

The header div's height will not stretch vertically to fit the content within it unless I specify a height for it or unless I stick one of these:

  <div style="clear:both"></div> 

before the header div's closing tag.

<style type="text/css">
#header {
    border: 1px solid green;
}
</style>

        <div id="header">
            <span id="logo"><img src="images/logo.png" /></span>
            <span class="fright">something will go here</span>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div><!-- header -->

Can this be done without the use of a "clearing div" or without giving the header div a fixed height?

Answer 1

The only reason the clear would have an impact is if you are using floats. Can you post all of your CSS.

Answer 2

You can use the clearfix method to avoid having to use a clearing div. It's documented on this site.

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Then all you have to do is give the div a .clearfix class.

Answer 3

Try this:

#header { overflow: auto; width: 100%; }

It will clear past your floats without the extra element