CSS Div within Div full width and full height, relative to each other

I am trying to build the following layout:

+-----------------------------------+
|                                   |
+-----------------------------------+
+-----------------------------------+
| +-------------------------------+ |
| |                               | |
| +-------------------------------+ |
| +-----+  +-------------+ +------+ |
| |     |  | +---------+ | |      | |
| |     |  | |         | | |      | |
| |     |  | |         | | |      | |
| |     |  | +---------+ | |      | |
| |     |  | +---+ +---+ | |      | |
| |     |  | |   | |   | | |      | |
| |     |  | |   | |   | | |      | |
| |     |  | |   | |   | | |      | |   
| |     |  | +---+ +---+ | |      | |
| +-----+  +-------------+ +------+ |
+-----------------------------------+

but for some reason the divs won't expand to full width or height: http://jsfiddle.net/vmpgf/

any suggestions?

Thanks

Answers


Well this will get you very close, I am having some issues with the div on the right, and for some reason it only fits if the total div widths in the three add up to 99% so I am sure this is not the "answer" but will get you close.

HTML -

<div id="divbanner">Top Banner</div>
<div id="container">
    <div id="banner">
        Banner
    </div>
    <div id="left">
        Left
    </div>
    <div id="center">
        <div id="centertop">
            Center Top
        </div>
        <div id="centerleft">
            Center Left
        </div>
        <div id="centerright">
            Center Right
        </div>
    </div>
    <div id="right">
        Right
    </div>
</div>

CSS -

#divbanner {
    width: 100%;
    background: #F45;
}
#container {
    width: 100%;
    background: #00C;
}
#banner {
    width: 100%;
    background: #778;
}
#left {
    width: 30%;
    background: #cc5;
    display: inline-block;
}
#center {
    width: 39%;
    background: #cc7;
    display: inline-block;
}
#right {
    width: 30%;
    background: #cc7;
    display: inline-block;
}
#centertop {
    width: 100%;
    background: #445;
}
#centerleft {
    width: 50%;
    background: #c62;
    float: left;
}
#centerright {
    width: 50%;
    background: #062;
    float: right;
}​

​ Try it out here: http://jsfiddle.net/tyDq5/


Need Your Help

F#: how to find Cartesian power

f# functional-programming

I have a problem with writing a Cartesian power function. I found many examples about calculating Cartesian Product, but no one about Cartesian power.

Convert AppleScript response to JSON

objective-c json cocoa applescript

I have a Cocoa application, part of it takes AppleScript from the user in a web view. I currently can pass a single string from a command (e.g. the current iTunes song name), however, if I run a co...