Two divs: one fixed, other stretched

Question

I am trying to accomplish this:

But I am having trouble getting the two middle divs to

Answer 1

Here, I made a duplicate of your picture: jsbin.com/ipexep/3 (click "edit in jsbin" at the top-right to view and edit the source)

I for the height of the top and bottom sections, I took the height for them that you put in the picture.

Note: I did it by making every section absolutely positioned and setting their top, bottom, left, or right attributes accordingly.

Also, notice that my method will match every screen size. I have streched it in every area you didn't specify a dimension. (except the header and footer needed a height dimension so I guessed since you didn't specify)

Answer 2

You can accomplish that very easy using grid system.

http://960.gs/

Take a look, you can choose a 12 or 16 , 24 or even more columns. You just use classes like "grid_4", "grid_8" depending on the width you need.

Answer 3

Wouldn't this work as intended?

#floatitleft{
    width:300px;
    float:left;
}
#floatitright{
    margin-left: 300px;
}