CODEWITHSUNDEEP
htmlcsslayoutfooter
amandathewebdev
amandathewebdev

Reputation: 269

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: 3817

Answers (2)

Rizwan Mumtaz
Rizwan Mumtaz

Reputation: 3965

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: 14249

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

Upvotes: 3

Related Questions