Absolute Positioned Div is hiding my other divs below

Question

Have a look at, http://thomaspalumbo.com

I have this CSS for my website's container:

.graybox {
padding: 0 30px 30px 30px;
background: #ededed;
position:absolute;
left:0;
right:0;
}

Then I have a container on top of that to center that info. The .graybox container spreads the width of the page like I want but now my footer div is hidden, according to firebug is it actually behind? And up on the page?

Is there a fix for this?

While I'm here can anyone explain the white space on the right side of the page. It comes into effect once the page is resized smaller.

Cobblestone

Not addressing your question in particular, but, are you aware that in your HTML code you are repeaitng an Id several times? Take a look to several divs as <div id="siteholder">. Fix it and then target your footer, if still is required... – Jp

Yes, I'm in the process of going back over old crappy code I wrote a few years ago. – Cobblestone

@Jp do you advise I just make them classes? – Cobblestone

Sure.Its a good choice. Then..address your problem – Jp

Answer 1

You can use the CSS z-index property to make sure your footer is in front of the content. Z-index only works when the element is positioned though. So make sure you add position:relative to your footer

#footer{
    position:relative;
    z-index:999;
}

Read more: http://www.w3schools.com/cssref/pr_pos_z-index.asp

EDIT

Just checked out the code of your website, and I don't understand why your graybox is positioned absolutely, this will only make things more complex. The same goes for your menu, why position it absolute, why not just add it in the right order in the HTML in the first place?

EDIT

If you want to center your content but with a background that has a 100% width then you can simply add a container div like so:

HTML

<div class="container">
    <div>lorem ipsum....</div>
</div>

CSS

.container{
    background:red;
}

.container div{
    width:400px;
    margin:0 auto;
    background:yellow;
}

See JSFiddle here: http://jsfiddle.net/HxBnF/

Currently you cannot do this because you have a container which you set at 980px, don't ever do that unless you are sure you don't want anything to wrap over it, like in this case the background of a div in that container.

Gravimetric

Ok so that brought it to the front. Now it seems to be way up there. – Cobblestone

Well I want my content to remain centered but I also want that gray box and my navigation to span the whole width of the page. Do you know of another way? – Cobblestone

Added more info in the answer how you could do that – Gravimetric

It was so simple! Thanks I made those changes and all of my problems vanished. Thank you again for taking the time to help me! – Cobblestone

Quick thing I've noticed is that my page as white space on the right when viewed from a mobile or ipad. It seems it is outside of the body. – Cobblestone

For the white-space you'll need to add min-width: /*width of the content*/ to those backgrounds. – Gravimetric

Answer 2

in the div style, just assign a z-index value greater than any other z-index such as

.divClass{
    position: absolute;
    z-index: 1 //if other elements are still visible chose a higher value such as 20 or  even higher.
}

Brindle