Fixed position header in html

Question

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

I need to place the div container right below the title. Since the header height is dynamic, I cannot use a fixed value for the top margin.

How can I do that?

Here is 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

Well! When I saw my question now, I realized that I did not want to mention a fixed field value due to the dynamic height of the header.

Here is what I used for such scenarios.

Calculate the height of the header using jQuery and apply it as the top value of the field.

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

Demo

Answer 2

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

 #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 3

 body{ margin:0; padding:0 0 0 0; } div#header{ position:absolute; top:0; left:0; width:100%; height:25; } @media screen{ body>div#header{ position: fixed; } } * html body{ overflow:hidden; } * html div#content{ height:100%; overflow:auto; } 

Answer 4

I assume your title is fixed because you want it to stay at the top of the page even when the user scrolls down, but you don't want it to close the container. However, setting position: fixed removes the element from the linear layout of the page, so you either need to set the top margin of the “next” element to the same height as the title, or (if for some reason you don't want to do this), place a placeholder. which occupies a space in the page stream, but appears below it, where the title appears.

Answer 5

position :fixed is different from another layout. If you have a fixed position for your header , keep in mind that you must set margin-top for the content div.

Answer 6

set the #container div top to zero

 #container{ top: 0; }