HTML Container Element doesnt have height [duplicate] - html

Question

This question already has answers here:
How come my float elements aren't within their parent
(2 answers)
Closed 8 years ago.
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">
Site Title
</div>
<nav id="top-right">
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-2">Home2</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

Answer 1

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">
Site Title
</div>
<nav id="top-right">
<div class="menu">
<ul>
<li class="current_page_item">Home
</li>
<li class="page_item page-item-2">Home2
</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">
Site Title
</div>
<nav id="top-right">
<div class="menu">
<ul>
<li class="current_page_item">Home
</li>
<li class="page_item page-item-2">Home2
</li>
</ul>
</div>
</nav>
</div>
</header>

Answer 2

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">
Site Title
</div>
<nav id="top-right">
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-2">Home2</li>
</ul>
</div>
</nav>
</div>
</header>
Updated fiddle