Absolute Positioned Div Not Displaying The Way Need it

Question

Im trying to mimic a layout as seen here. http://themeforest.net/item/real-homes-wordpress-real-estate-theme/full_screen_preview/5373914 I've built it many times because I'm learning how to do make it respond to browser resizing. Anyway, I've stripped it down to figure it out. My problem at the moment is I have an absolute positioned div nested in a relative positioned div. It is positioned right:0 and bottom: 0. However its displays at the top. It is supposed to be a wrapper div, but I've made it a simple rectangle for the purposes of seeing it work. Here is a working example. http://jsfiddle.net/3Dat6/

Thanks in advance

This is the div in question

<div class="main-menu-and-contact-wrap"></div>

Answer 1

To make use of absolute positioning, you only need to specify position:relative on elements that will contain children that use position:absolute.

If your CSS you're specifying position:relative all over the place for no good reason.

By specifying position:relative, you are defining the origin point for the absolutely-positioned child elements.

So in your case, you should only be specifying position:relative on the #headcontainer element.

Also, because you are using floated elements ,#headcontainer is collapsing to zero height (add a border to it and you'll see). So be sure to clear your floated elements.

Answer 2

Put the <div class="main-menu-and-contact-wrap"></div> just bellow the <div id="headerTop">.

The order of divs is important when using absolute objects.

See in action http://jsfiddle.net/3Dat6/1/