CODEWITHSUNDEEP
htmlcss
stackers
stackers

Reputation: 3270

CSS stretch wrapper to encapsulate contents vertically

I'm trying to build a navigation, and I want the bar to be the same height as the links.

http://jsfiddle.net/520sd51p/

It's clearly sized based on the logo, if I take out the logo, the bar disappears.

Is this possible to do without setting a static height? (I want to do this so that the buttons are perfectly centered vertically and fill the whole bar vertcally.)

html

<header><!-- header -->
    <a id="logo" href="/">Logo</a>
    <nav><!-- navigation -->
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/gallery">Gallery</a></li>
          <li><a href="/contact">Contact</a></li>
          <li><a href="/blog">Blog</a></li>
        </ul>
    </nav>

</header>

css

html,body { height:100%; }

header {
    background-color: red;
}

header a {
    color: #fff;
    text-decoration: none;
}

header ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

header ul a{
    font-size: 1.5em;
    display: block;
}

Upvotes: 1

Views: 238

Answers (1)

j08691
j08691

Reputation: 207891

Add overflow:auto to your header:

header {
    background-color: red;
    overflow:auto;
}

jsFiddle example

When you float the child elements, they're removed from the flow of the document and the parent effectively collapses. Adding overflow:auto restores the behavior you're after.

Upvotes: 2

Related Questions