I am facing a challenge where I have a header with dynamic height and fixed position.
My goal is to position the container div right below the header. However, since the header height varies, using a fixed value for margin-top is not feasible.
Any suggestions on how I can achieve this?
Below is the snippet of my CSS:
#header-wrap {
position: fixed;
height: auto;
width: 100%;
z-index: 100
}
#container{
/*Looking for a CSS solution to start this div under the fixed header without specifying top margin/padding*/
}
...and here is a snippet of the HTML structure:
<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>