Having Issues With My

I have a 3 container structure. container 1 is of x height...container 2 fills the rest of the window...container 3 SHOULD start after container 2, but its disappeared. JSFIDDLE H

Solution 1:

Because #maincontent has absolute positioning, footer is behind it below header.Use position: absolute to put footer at the bottom of the page; then change bottom: 0 to bottom: 50px for #maincontent. Fiddle: http://jsfiddle.net/xFWHk/1/

Solution 2:

Change #maincontent's bottom property to the height of your footer, ie:

#maincontent {
   top: 1.8em;
   bottom: 50px /* Height of footer */
}

Solution 3:

Here's a fix: http://jsfiddle.net/xFWHk/2/ ... You don't need absolute positioning in your case as "container 2" will follow "container 1" as the natural flow of the document. CSS:

html, body {height:100%;padding:0; margin:0;}

    header{
        background-color:red; 
        height:1.8em;
    }
    #maincontent{
        background-color:black; 
        width: 100%;
        height: 100%;

    }
    footer{
        background-color:yellow;
        height:50px;
    }

Solution 4:

I've solved it, FINALLY!

footer{
        background-color:yellow;
        height:50px;
        width:100%;
        position:absolute;
        bottom:-50px;
    }

added absolute to the footer and a negative margin. Will see how this goes.