Question

I’m looking for a compatible CSS layout that will support the following;

+-----+--------+
| A   | C      |
+-----+        |
| B   |        |
|     |        |
|     |        |
+-----+--------+

C is the container for the whole thing. A is a div that can vary in height, according to it’s content (i.e. it’s not a fixed height). B is a div that is displayed directly beneath A, and fills the remaining height from C, once A has taken it’s share.

I’m hoping for a non-Javascript, non-table solution, hopefully!

EDIT: I should also add, that ‘C’ represents a container with a set height. In my current page, it is 100% of the height of the browser window.

Answer 1

You can achieve this with display:table property like this:

HTML

<div class='wrapper'>
   <div class='left'>
       <div class="table">
       <div class='a'>a</div>
             <div class='b'>b</div>
       </div>

   </div>
   <div class='c'>c</div>
</div>

CSS

.wrapper{
    display:table;
    width:100%;
    height:500px;
}
.wrapper > div{
    display:table-cell;
    width:50%;
}
.table > div{
    display:table-row;
}
.left{background:yellow}
.a{
    background:red;
}
.b{
    background:green;
}
.c{
    background:blue;
}
.table{
    display:table;
    width:100%;
    height:100%;
}

Check this http://jsfiddle.net/X5Ze4/