Question

I have four div elements in a container:

<div id="container">
    <div id="top"></div>
    <div id="bottom-left"></div>
    <div id="bottom-center"></div>
    <div id="fill"></div>
</div>

I need to position them as follows:

The top edge of the top element should be at the top edge of the container.
The bottom-left element should be in the bottom-left corner of the container.
The bottom-center element should be centered at the bottom of the container.
The fill element will have a fixed width and should take the remaining space vertically.

The problem is that the fill element will contain arbitrary text and can be of arbitrary height. I need to put it under the top element and place the bottom-center under it. the bottom edge of bottom-left must align with the bottom of bottom-center.

I tried absolute positioning, but it does not work for arbitrary text length.

I would appreciate any help.

EDIT: here is jsfiddle code: http://jsfiddle.net/gCg29/
it creates the layout that I want to achieve but with a table.

how to get rid of the table and have the same functionality? notice that if the width of the browser window is insufficient then the elements do not overlap. also notice that if the text grows in length then the left-bottom and under-text elements stick to the text’s bottom.

                           +-----------------------+
                           |  top (fixed size)     |
                           +-----------------------+
                    +-----------------------------------+
                    |                                   |
                    |                   fill            |
                    |        (arbitrary height,         |
+-----------------+ |         fixed width)              |
|                 | |                                   |
|  bottom-left    | |                                   |
|  (fixed size)   | |                                   |
|                 | |                                   |
|                 | |                                   |
|                 | |                                   |
|                 | |                                   |
|                 | +-----------------------------------+
|                 |      +--------------------------+
|                 |      |bottom-center (fixed size)|
+-----------------+      +--------------------------+

Answer 1

Here you go:

#container {
    position: relative;
    overflow: hidden;
}

#fill {
    margin: 0 auto 50px; /* 50px = height of bottom-center */
    width: 300px;
}

#top, #bottom-center {
    height: 50px;
    width: 200px;
    margin: 0 auto;
}

#bottom-center {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -100px; /* - width / 2 */
}

#bottom-left {
    position: absolute;
    left: 0;
    bottom: 0;
}

http://jsfiddle.net/nXqQr/1/

The important part is overflow: hidden; on the container which will make the margin on #fill extend its size, so that #bottom-center fits in.