Divs on the bottom of a sticky (fixed) navigation bar are not visible

Question

I've created a sticky navigation bar that resizes when scrolling down. In this navigation bar I created one relative (parent) div called header_wrap containing two absolute (child) divs. When doing this the content of those child divs is not visible anymore.

When removing the option position: relative; from the parent div header_wrap the content of the child divs become visible however at that moment they ignore the given width of 970px in the header_wrap.

I created a jsfiddle to demonstrate: http://jsfiddle.net/wvUWR/1/

Answer 1

it's because you are absolute positioning elements inside of a parent with no specified height. set #header_wrap to height: 100%;.