HTML Container Element doesnt have height

Question

The Header part of my template doesn't get the height of its nested Elements.

<header id="header">
    <div id="header-inner">
        <div id="top-left">
            <a href="#" title="something" rel="home">Site Title</a>
        </div>

        <nav id="top-right">
            <div class="menu">
                <ul>
                    <li class="current_page_item"><a href="#">Home</a></li>
                    <li class="page_item page-item-2"><a href="#">Home2</a></li>
                </ul>
            </div>
        </nav>
    </div>
</header>

#header {width:100%; float:left;}
#header-inner {width:600px; margin:0 auto;}
#top-left {float:left;}
#top-right {float:right;}

I also made a jsfiddle:

http://jsfiddle.net/hqpb3cyc/

The only solution I know is to give the #header and / or #header-inner float:left; or display:inline-block; But I think thats not the right way to do this!?

Hope someone can help me

best regards

score 5 · Accepted Answer · answered Dec 15 '14 at 19:40

You have to clear floats. For example:

<br style="clear: both" />

#header {
  width: 100%;
  float: left;
  background: #D3D3D3;
}
#header-inner {
  width: 600px;
  margin: 0 auto;
}
#top-left {
  float: left;
}
#top-right {
  float: right;
}

<header id="header" role="banner">
  <div id="header-inner">
    <div id="top-left">
      <a href="#" title="something" rel="home">Site Title</a>
    </div>

    <nav id="top-right">
      <div class="menu">
        <ul>
          <li class="current_page_item"><a href="#">Home</a>
          </li>
          <li class="page_item page-item-2"><a href="#">Home2</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  <!-- clear both floats -->
  <br style="clear: both" />
</header>

Addinional you can use pseudo-element :after to clear floats:

#header {
  width: 100%;
  float: left;
  background: #D3D3D3;
}
#header-inner {
  width: 600px;
  margin: 0 auto;
}
#top-left {
  float: left;
}
#top-right {
  float: right;
}
#header-inner:after {
  content: "";
  clear: both;
}

<header id="header" role="banner">
  <div id="header-inner">
    <div id="top-left">
      <a href="#" title="something" rel="home">Site Title</a>
    </div>

    <nav id="top-right">
      <div class="menu">
        <ul>
          <li class="current_page_item"><a href="#">Home</a>
          </li>
          <li class="page_item page-item-2"><a href="#">Home2</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>

this would do it. Wrote something a while ago about it and it might be helpful http://babble.byvernacchia.com/2011/11/18/using-css-clearfix.html — vernak2539, Dec 15 '14 at 19:41
Thanks man! Learned something new :) vernak your illustration is also really good — Hans Ullrich, Dec 15 '14 at 19:43

score 1 · Answer 2 · answered Dec 15 '14 at 19:44

You should clear the floated inner element. You don't even have to change your HTML. You can do that in CSS as well by using the after pseudo element:

#header {width:100%; float:left;}
#header-inner {width:600px; margin:0 auto; border: 1px solid red;}
#top-left {float:left;}
#top-right {float:right;}
#header-inner::after{
    display: block;
    content: "";
    clear: both;
}

<header id="header" role="banner">
 <div id="header-inner">
  <div id="top-left">
   <a href="#" title="something" rel="home">Site Title</a>
  </div>

  <nav id="top-right">
   <div class="menu">
                <ul>
                    <li class="current_page_item"><a href="#">Home</a></li>
                    <li class="page_item page-item-2"><a href="#">Home2</a></li>
                </ul>
            </div>
  </nav>
 </div>
</header>

Updated fiddle

HTML Container Element doesnt have height

2 Answers2