ansaurus

Question

CSS Problem: Text Sitting Below Fixed Position Div

Answer 1

+1 A:

Fixed positioning will always sit above flow (normal) positioning. You need to change #content to use absolute or fixed positioning and then correctly position the element.

Here is the updated CSS:

#content {
    width:200px;
    min-height:100%;
    margin:auto;
    z-index:1;
    position:absolute;
    left:50%;
    margin-left:100px; /* half the width to obtain proper offset */
}

David Pfeffer 2010-01-05 04:32:50

Thanks mate! So simple in the end. I thought it might be.

Ben 2010-01-05 04:43:45

Answer 2

A:

After looking at source code of http://liquid-shit.com/csstest.php, you need to put your content and fixed box in 2 seperate divs

<body>
    <div id="content">
        lorem ipsume says put your content here.
    </div>

    <div id="footer">
        &nbsp;
    </div>

</body>

Fix position of your #footer and give it high z-index in order to have contents of #content go behind it.

rockacola 2010-01-05 04:38:17

Answer 3

A:

I got the effect that I think you're looking for with the following CSS. (This also eliminates the need for the pattern div.)

html, body {
background-color:#000f2f;
background-image:url(backgroundgradient.jpg);
background-repeat:repeat-x;
background-attachment:fixed;
background-position:bottom;
height:100%;
}

#content {
background-image:url(pattern.png) ; 
background-attachment: fixed;
background-repeat:no-repeat;
background-position:bottom;
width:200px;
min-height:100%;
margin:auto;
z-index:1;
}

EDIT: Fixed copy/paste error from previous edit.

Dan Breslau 2010-01-05 04:44:14

Oh, and you don't need the z-index anymore, either.

Dan Breslau 2010-01-05 04:50:40

ansaurus

tags:

views:

answers:

CSS Problem: Text Sitting Below Fixed Position Div

related questions