Sowmya Sowmya - 7 months ago 25
HTML Question

position fixed header in html

I have a header with a fixed position.

The container div which starts after the header should start exactly below the header without giving any to padding/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

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/