This layout uses only absolute positioning and the left, right, top, bottom, width, and height properties to position the windows. I like this layout because it is very simple and makes it trivial to add any number of additional elements. It is rendered similarly in Firefox, Opera, IE7 and Safari. However, as I mentioned before, it doesn't work correctly in IE6. If you're using IE6 you will see that the content windows are collapsed to their smallest size and the overflow:hidden property on the html, body selectors hides all the content that is off the page. This shouldn't happen; the content div should scroll, but we're all use to IE problems.
I had to decide whether to abandon this layout and opt rather for a mixture of floats, margins, and absolute positioning like I've seen in a number of examples, or looks for an alternative solution to IE6's deficiency? I decided to see what could be done with a little JavaScript.
| 1 2 3 4 5 | html, body { width:100%; height:100%; margin:0; padding:0; overflow:hidden; height:100%; } div.layout_div { position:absolute; overflow: hidden; background-color:#DDD; } div#header_div { background-color:#DDD; left:5px; right:5px; top:5px; width:auto; height:45px; } div#link_div { background-color:#DDD; left:5px; top:55px; bottom:5px; width:140px; height:auto; overflow:auto; } div#content_div { background-color:#FFF; left:150px; right:5px; top:55px; bottom:5px; width:auto; height:auto; overflow:auto; border:solid 1px #DDD; } |