Geek Answers Handbook

HTML Container Element Has No Height

The header part of my template does not 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 did jsfiddle:

http://jsfiddle.net/hqpb3cyc/

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

Hope someone can help me

Best wishes

+7
html css
source share
2 answers

You need to clean the 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>

Addnional you can use pseudo-element :after to clear floating elements:

 #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>
+5
source share

You must clear the floating inner element. You don’t even need to change your HTML. You can do this in CSS 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

+1
source share

More articles:


All Articles