Height of a div reduces when inner div has position absolute

Question

I am having a hard time phrasing the question. I have a <header> with a absolute positioned div within it. The problem is, due to it's absolute positioning, the next element is going underneath it. I hope you understand what I mean to say. I have created a jsfiddle to replicate the issue.

My question is, how can I clear the height so that the next element doesn't get underneath the absolute positioned div? Here is a screenshot of the problem..

And, here is the HTML and the CSSs I have tried. Any help on this is appreciated.

 .site-header{ position: relative; width:100%; height:auto; display:block; clear:both; } .site-header::after{ content:""; height:1px; display:block; width:100%; clear:both; } .top-nav{ background: #222222; padding:10px; display:block; } .main-nav-wrapper{ position:absolute; background:rgba(0,0,0,.8); padding:40px 0; height:20px; width:100%; clear:both; } 

 <header class="site-header"> <nav class="top-nav"> </nav> <div class="main-nav-wrapper"> <nav class="main-nav"></nav> </div> </header> <section class="content"> <h1>SECTION HEADING</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tortor ante, dictum sed volutpat sit amet, accumsan at urna. Vestibulum congue, nulla a mollis dapibus, ex ex iaculis velit, vel lacinia elit justo at erat. Nulla at rutrum ipsum. Integer et tortor vitae ligula porttitor feugiat. Quisque quis nulla in tortor eleifend aliquet. Nunc nec dui nisl. Integer ultricies ullamcorper nisl, ut imperdiet augue luctus id. Proin lobortis non nibh ut accumsan. Sed mi ligula, suscipit non commodo vitae, facilisis at sapien. Praesent luctus arcu tincidunt felis consectetur volutpat. Duis tellus risus, auctor elementum bibendum at, varius vel massa. Etiam tristique sit amet nisi a vestibulum. Aenean mollis suscipit nunc. Vestibulum volutpat diam ut metus interdum cursus. Donec vitae arcu varius, dapibus dolor ut, commodo arcu. Pellentesque consequat orci ex, id hendrerit ligula mollis vitae. Suspendisse nulla libero, efficitur ut dapibus sed, commodo id enim. Cras bibendum urna in elementum egestas. Nulla a metus tincidunt, auctor ante non, pharetra arcu. Donec vitae efficitur enim. Fusce orci odio, scelerisque non vestibulum efficitur, fermentum ac velit. Nunc tincidunt ac lectus nec tincidunt. Sed consectetur semper lacus at posuere. Vestibulum blandit dolor at eros varius, quis euismod felis facilisis. Ut rutrum neque neque. Etiam vitae odio turpis. </p> </section> 

Answer 1

You need to position to the .content section that will be displayed right after the absolutely positioned element:

.content{
   position: relative;
   top: 100px;
}

demo

Or, set the fixed height in .site-header :

.site-header{
  position: relative;
  width:100%;
  height:100px;
  display:block;
}

demo

Answer 2

I think you want something like this Fiddle with content

 .site-header{ position: relative; width:100%; height:auto; display:block; } .top-nav{ background: #222222; padding:10px; display:block; } .main-nav-wrapper{ position:relative; clear:both; } .overlay{ position:absolute; background:rgba(0,0,0,.8); padding:0; width:100%; height:100%; clear:both; } 

 <header class="site-header"> <nav class="top-nav"> </nav> <div class="main-nav-wrapper"> <nav class="overlay"></nav> <nav class="main-nav">home | about</nav> <p> More content </p> </div> </header> <section class="content"> <h1>SECTION HEADING</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tortor ante, dictum sed volutpat sit amet, accumsan at urna. Vestibulum congue, nulla a mollis dapibus, ex ex iaculis velit, vel lacinia elit justo at erat. Nulla at rutrum ipsum. Integer et tortor vitae ligula porttitor feugiat. Quisque quis nulla in tortor eleifend aliquet. </p> </section> 

and Fiddle without content ,

 .site-header{ position: relative; width:100%; height:auto; display:block; } .top-nav{ background: #222222; padding:10px; display:block; } .main-nav-wrapper{ position:relative; clear:both; } .overlay{ position:absolute; background:rgba(0,0,0,.8); padding:0; width:100%; height:100%; clear:both; } 

 <header class="site-header"> <nav class="top-nav"> </nav> <div class="main-nav-wrapper"> <nav class="overlay"></nav> <nav class="main-nav"></nav> </div> </header> <section class="content"> <h1>SECTION HEADING</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tortor ante, dictum sed volutpat sit amet, accumsan at urna. Vestibulum congue, nulla a mollis dapibus, ex ex iaculis velit, vel lacinia elit justo at erat. Nulla at rutrum ipsum. Integer et tortor vitae ligula porttitor feugiat. Quisque quis nulla in tortor eleifend aliquet. Nunc nec dui nisl. </p> </section> 

so now if there is a content the overlay will appear and if not than it will not show itself, I havnt added any fixed height to any element I have just added an addition div for overlay. Is that how you want ?

Answer 3

it is because <header> does not have actual height, and you have navigation inside it which is cut out from document flow. either set height to <header> or don't use absolute positioning for navigation, otherwise <header> will colapse to height 0.

https://jsfiddle.net/j474js6e/3/ - height to header

https://jsfiddle.net/j474js6e/5/ - removed absolute from wrapper

Answer 4

An absolute positioned div does not take any space in its parent element. So you can create space for example with a margin in the affected element that's as high as the absolute positioned element. In your case:

.content { margin-top: 120px; }

fiddle: https://jsfiddle.net/ryup26kx/

Answer 5

Just delete the position:absolute; in .main-nav-wrapper :

 .site-header{ position: relative; width:100%; height:auto; display:block; clear:both; } .site-header::after{ content:""; height:1px; display:block; width:100%; clear:both; } .top-nav{ background: #222222; padding:10px; display:block; } .main-nav-wrapper{ XXXposition:absolute; background:rgba(0,0,0,.8); padding:40px 0; height:20px; width:100%; clear:both; } 

 <header class="site-header"> <nav class="top-nav"> </nav> <div class="main-nav-wrapper"> <nav class="main-nav"></nav> </div> </header> <section class="content"> <h1>SECTION HEADING</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tortor ante, dictum sed volutpat sit amet, accumsan at urna. Vestibulum congue, nulla a mollis dapibus, ex ex iaculis velit, vel lacinia elit justo at erat. Nulla at rutrum ipsum. Integer et tortor vitae ligula porttitor feugiat. Quisque quis nulla in tortor eleifend aliquet. Nunc nec dui nisl. Integer ultricies ullamcorper nisl, ut imperdiet augue luctus id. Proin lobortis non nibh ut accumsan. Sed mi ligula, suscipit non commodo vitae, facilisis at sapien. Praesent luctus arcu tincidunt felis consectetur volutpat. Duis tellus risus, auctor elementum bibendum at, varius vel massa. Etiam tristique sit amet nisi a vestibulum. Aenean mollis suscipit nunc. Vestibulum volutpat diam ut metus interdum cursus. Donec vitae arcu varius, dapibus dolor ut, commodo arcu. Pellentesque consequat orci ex, id hendrerit ligula mollis vitae. Suspendisse nulla libero, efficitur ut dapibus sed, commodo id enim. Cras bibendum urna in elementum egestas. Nulla a metus tincidunt, auctor ante non, pharetra arcu. Donec vitae efficitur enim. Fusce orci odio, scelerisque non vestibulum efficitur, fermentum ac velit. Nunc tincidunt ac lectus nec tincidunt. Sed consectetur semper lacus at posuere. Vestibulum blandit dolor at eros varius, quis euismod felis facilisis. Ut rutrum neque neque. Etiam vitae odio turpis. </p> </section> 

Answer 6

 position:relative:
 top:0px:

 clear:both;

clear both for the lower div