January 11, 20179 yr I am using absolute positioning in a relative DIV to position two images over each other and I then want to put the main navigation underneath this banner header. I can't use a fixed height because the content is responsive. Does anyone have any suggestions apart from using a dummy spacer DIV and using javascript to get and set the relevant element heights every time the window is resized (surely there's an easier way). Here's the code and CSS. I want the "nav" div to appear directly under the "banner". <header class="wrapper clrfix" > <div id="banner" style="width:100%; position:relative"> <img class="abs" src="img/photo.png"> <img class="abs" src="svg/vector_logo.svg"> </div> <div id="nav" class="wrapper clrfix"> <!-- main navigation --> <nav id="topnav"> <div class="mnu-toggle">Menu</div> <ul class="srt-mnu" id="mnu-main-nav"> <li><a href="/index.shtml">Home</a></li> <li><a href="info/news.shtml">News</a></li> <li><a href="reviews/index.shtml">Reviews</a></li> <li><a href="blog/index.shtml">Blog</a></li> <li><a href="#">About Us</a></li> </ul> </nav> <!-- end main navigation --> </div> </header> ======== CSS ======== img.abs{position:absolute;top:0;left:0} Thanks in advance. Paul
Create an account or sign in to comment