CODEWITHSUNDEEP
htmlcss
user3140714
user3140714

Reputation: 85

Parent div is too small for children divs

I have a page where the children divs do not expand the #header div as they should...

If the header div's height is set to 60px, or any other absolute value, I can make it stretch and work fine, but I cannot make it auto-size with the content inside...

I'm using Bootstrap 3 on the same page.

Can someone lend some advice on what to do? I've been fooling with the relative sizes of #header, #width-clip (all currently set to auto - again, if you set #header to a fixed height it works (sort of) but how do I get them to autosize?)

JSFiddle

HTML:

<div id="header" role="banner">
    <div id="sr-header-area">
        <div class="width-clip">
            <div class="dropdown srdrop" onmouseover="" onclick="open_menu(this)"><span class="selected title"> me</span></div>
            <div class="drop-choices srdrop" style="top: 18px; left: 0px;"><a class="choice" href="#">Link</a></div>
            <span class="separator">|</span>
            <ul class="flat-list sr-bar hover list-inline nopadding">
                <li><a href="#">pics</a></li>
                <li><span class="separator">-</span><a href="#">funny</a></li>
            </ul>
            <span class="separator">–</span>
            <a id="sr-more-link" href="#">edit »</a>    
        </div>
        <div id="header-bottom-left">
            <a id="header-img" class="default-header" title="" href="/">51451</a>
            <ul class="tabmenu">
                <li class="selected"><a href="#">Test</a></li>
                <li><a href="#">rising</a></li>
            </ul>
        </div>
        <div id="header-bottom-right">
        </div>
    </div>
</div>

CSS:

#header {
    background-repeat: no-repeat;
    height: 60px; /* only works if static height is set */
    background-color: #000;
    background-position: 0px 0px;
    border-bottom: 0px solid #000;
}

#header {
    border-bottom: 1px solid #5F99CF;
    position: relative;
    background-color: #CEE3F8;
    z-index: 99;
}

#sr-header-area {
    background-color: #F0F0F0;
    white-space: nowrap;
    text-transform: uppercase;
    border-bottom: 1px solid #808080;
    font-size: 90%;
    height: 18px;
    line-height: 18px;
}


#header-img.default-header {
    text-indent: -9999px;
    background-image: url('http://localhost/templates/bootstrap/img/sprites.png');
    background-position: 0px 0px;
    background-repeat: no-repeat;
    height: 40px;
    width: 150px;
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 3px;
margin-top: 27px;
}

Upvotes: 1

Views: 1239

Answers (2)

Shomz
Shomz

Reputation: 37701

The issue was bad nesting in header.

I've moved the header-bottom-left and header-bottom-right elements out of sr-header-area and set them as its siblings.

Now it autofills the space, all CSS changes are comments instead of deleted (two of them).

So, since sr-header-area is a full-width block element, it should stay on its own like that, and just put the header bottom elements after it. If something sounds semantially correct to do, you should probably try to follow the same structure in HTML/CSS. Otherwise, you're probably doing something hackish and chances are it might start posing problems at some point when you update/upgrade your website.

See it here: http://jsfiddle.net/CUdTe/3/

Upvotes: 1

Lukas S.
Lukas S.

Reputation: 5758

Looking at your fiddle, I'm seeing the reason the tabs are floating up a bit is because the <ul class="tabmenu"> has a default margin-bottom of 10px, which is coming from Bootstrap:

old header

Note the orange shading there - those are margins, and note that I have the tabmenu element selected.

If you override the margin by editing your .tabmenu rule to set margin-bottom: 0;, you'll get what I'm assuming is the intended result. See the updated fiddle here:

http://jsfiddle.net/CUdTe/2/

Upvotes: 1

Related Questions