CODEWITHSUNDEEP
htmlcss
Jake
Jake

Reputation: 1

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

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?

Upvotes: 0

Views: 119

Answers (3)

Nick Craver
Nick Craver

Reputation: 630627

Try this:

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

It will clear past your floats without the extra element

Upvotes: 1

Alex King
Alex King

Reputation: 2938

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.

Upvotes: 0

Dustin Laine
Dustin Laine

Reputation: 38543

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

Upvotes: 0

Related Questions