Question

I am looking for a general and complete solution to this common problem! I have HTML code like this:

<div id="CONTAINER">
    <div id="CONTAINER_LEFT"></div>
    <div id="CONTAINER_RIGHT"></div>
    <div id="CONTAINER_CENTER"></div>
</div>

I want to write CSS that lets me align the inner div elements vertically so their top edges are in line. Other considerations:

1. The Left and Right containers have fixed width.
2. The Center container has to fill the remaining width between Left and
   Right containers.
3. The height of each inner container depends upon its content
   and so varies between containers.
4. No overlapping is intended, the aim is something like the following
   image.
5. The height of the outer container should be equal to the greatest height
   of inner containers, if it is possible!!

The colors are just for displaying the idea!

I used “float: left;” and “float: right;” properties for the Right and Left containers but if the Center container has too much content, the area of this container fills the space below the floated elements! Also, I need a footer below the root container with width of 100%; any solution should consider this!

Answer 1

This seems to be the simplest solution and works under IE7-9, FF, Chrome, Safari and Opera:

.container {
   overflow: hidden;
   background: grey;
}

.left {
   float: left;
   width: 200px;
   background: red;
}

.middle {
   margin-left: 200px;
   margin-right: 200px;
   background: green;
}

.right {
   float: right;
   width: 200px;
   background: blue;
}