CODEWITHSUNDEEP
htmlcsslayoutfooter
amandathewebdev
amandathewebdev

Reputation: 259

Footer behind content CSS

I've searched the internet and can't find anything that works here.

My footer is obscuring my main content seemingly in every browser but firefox. I want my footer to rest behind my main content. The site I'm making is elastic and meant to fit in the browser window with no scrolling, so I'm not sure if a sticky footer is what I'm looking for. That's why I have the margin set to negative on the footer. I want to condense the page with the footer behind the black box.

Here's a jsFiddle demo and here's what I want it to look like: enter image description here

Upvotes: 1

Views: 3814

Answers (2)

Rizwan Mumtaz
Rizwan Mumtaz

Reputation: 3955

You can use Z-Index to control the order of the elements. Add z-index:-1; Here is the result of what you are looking for. http://jsfiddle.net/bd7Vy/3/

footer {
    clear: both;
    position: relative;
    margin: -5em;
    padding-top: 4em;
    color: black;
    width: inherit;
    height: 3.2em;
    background-color: #917266;
    background-repeat: repeat-x;*
    z-index:-1;
}

Upvotes: 1

jacktheripper
jacktheripper

Reputation: 14219

Try using the z-index property. See this updated jsFiddle

Upvotes: 3

Related Questions