css - Absolute Positioned Div is hiding my other divs below -


have at, http://thomaspalumbo.com

i have css website's container:

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

then have container on top of center info. .graybox container spreads width of page want footer div hidden, according firebug behind? , on page?

is there fix this?

while i'm here can explain white space on right side of page. comes effect once page resized smaller.

you can use css z-index property make sure footer in front of content. z-index works when element positioned though. make sure add position:relative footer

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

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

edit

just checked out code of website, , don't understand why graybox positioned absolutely, make things more complex. same goes menu, why position absolute, why not add in right order in html in first place?

edit

if want center content background has 100% width can add container div 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 cannot because have container set @ 980px, don't ever unless sure don't want wrap on it, in case background of div in container.


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

CSS3 Transition to highlight new elements created in JQuery -