position fixed header in html

Question

I have a header (dynamic height) with a fixed position.

I need to place the container div right below the header. As the header height is dynamic, I can't use the fixed value for top margin.

How can this be done?

Here's my CSS:

#header-wrap {     position: fixed;     height: auto;     width: 100%;     z-index: 100 } #container{      /*Need to write css to start this div below the fixed header without mentioning top margin/paading*/ } 

...and HTML:

<div id="header-wrap">   <div id="header">     <div id="menu">       <ul>       <li><a href="#" class="active">test 0</a></li>       <li><a href="#">Give Me <br />test</a></li>       <li><a href="#">My <br />test 2</a></li>       <li><a href="#">test 4</a></li>        </ul>     </div>     <div class="clear">     </div>   </div> </div><!-- End of header -->  <div id="container"> </div> 

Answer 1

Your #container should be outside of the #header-wrap, then specify a fixed height for #header-wrap, after, specify margin-top for #container equal to the #header-wrap's height. Something like this:

#header-wrap {     position: fixed;     height: 200px;     top: 0;     width: 100%;     z-index: 100; } #container{      margin-top: 200px; } 

Hope this is what you need: http://jsfiddle.net/KTgrS/

Answer 2

Well! As I saw my question now, I realized that I didn't want to mention fixed margin value because of the dynamic height of header.

Here is what I have been using for such scenarios.

Calculate the header height using jQuery and apply that as a top margin value.

var divHeight = $('#header-wrap').height();  $('#container').css('margin-top', divHeight+'px'); 

Demo