Question

I’m trying to create a simple web page that resembles the following:

I’ve got three DIVs, as follows:

<div class="leftNav">       
</div>
<div class="topPanel">          
</div>
<div class="bottomPanel">           
</div>

And here’s the CSS:

.leftNav
{
    width: 20%;
    height: 100%;
    float: left;    
}

.topPanel
{
    width: 80%;
    height: 50%;
    float: right;
}
.bottomPanel
{
    width: 80%;
    height: 50%;
    float: right;
}

The end result, however, looks completely out-of-whack. Is it possible to create such a thing with DIVs and CSS?

Answer 1

There are a few ways to do this.

You can fix your original approach simply by adding this:

html, body {
    height: 100%;
    overflow: hidden; /* to hide any scrollbars that might appear */
}

See: http://jsfiddle.net/thirtydot/n4wr4/