Full-length menu on left, two content panes on right: DIV-and-CSS-only approach?

css, html, layout

Solution

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/

Problem

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?

Original source