Question

I have a problem with footer positioning. It doesn’t go to the bottom/last.

So, I have a container div which has 3 divs – float:right , float:left and the center one (which has position:absolute) that comes between the two floated divs.

The center one must have fixed width and height because it’s an image.

In that center div I have another div with a lot of content.

The problem is, because the center div has fixed width and height, it doesn’t take the childs div height.

So my problem is how to put the footer that it comes last (after the container)?

Note – with JQuery I put the width of the floated divs because they take 100%-980px width.

This is how it looks like.

I tried putting to the center div overflow:auto,overflow:overlay,margin-left:auto;margin-right:auto;.

Answer 1

After reading your question again an again i come to conclusion and create the below fiddle using your code and embed a sample image for you desired size.

Please let me know if i am wrong while understanding your question. So i can work around according your needs.

fiddle: http://jsfiddle.net/ah3nr/6

Demo: http://jsfiddle.net/ah3nr/6/embedded/result/

My approach:

I have remove the position:absolute from center div and added new div for image and relate them both using css layer techniques.

Updated css:

.sectionDownContainer {
    width: 980px;
    /*height:270px;*/
    border:1px solid red;
    /*position: absolute;*/
    position:relative;
    top: -32px;
    z-index: 1;
}
/*.sectionDownMenu {
    margin-left: 50px;
    margin-top: 1px;
    display: block;
}
*/

#image_container {
    position:relative;
    width:980px;
    height: 270px;
    margin-top:-2px;
    z-index:2;
}

.sectionDownContent {
    width: 640px;
    margin-top: -190px;
    margin-left: 50px;
    position: relative;
    z-index:5;
    color:#000;
    font-weight:bold;
}

Screenshot: