Hi,
I am looking for a way to create a CSS-only (no JavaScript) layout with 5 regions that looks like this:
┌────────────────────┐
│ H │
├────┬────────┬──────┤
│ │ │ │
│ │ │ │
│ │ │ │
│ A │ B │ C │
│ │ │ │
│ │ │ │
│ │ │ │
├────┴────────┴──────┤
│ F │
└────────────────────┘
(The above diagram will display correctly only if your font has the Unicode box-line-drawing characters.)
The layout must fill the available space in the web browser completely (both height and width). A, B, C must have the same height; and H and F must have the same width. I.e., there must be no gaps between the regions, except for a fixed margin. The elements inside the region should know their parents size; that means, if I place
<textarea style="width:100%;height:100%">Just a test</textarea>
inside a region, it will extend to the full width and height of the region. There shall be no scroll bar at the right side of the browser window (because the heights of H, C, and F exactly add up to the browser client-area's height).
This is super-easy to do if you are using a <table> to do the layout. But I keep reading that using tables for formatting is a bad thing and CSS is the way to go.
I am aware that there are W3C working groups that work on extending the CSS standard by features that would make the above layout very easy to implement. These standard extensions, however, are not currently implemented by most browsers; and I need a solution that works with current browsers.
I have been looking around the many web pages that contain sample CSS layouts, but none of them can do what I described above. Most of these layouts either are not full-height, or the columns have different heights, or they require JavaScript.
Therefore, my question is: is it possible to create the above layout, using only CSS (no JavaScript, no faux columns, no <table>)? Of course, the solution should work with current web browsers.
EDIT: Based on the solution provided by Gilsham, I managed to write a sample page that generates the desired CSS-only layout (tested with Firefox 3.5.5 and IE8):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{
height:100%;
margin:0;
padding:0;
border:0;
}
div{
margin:0;
border:0;
}
textarea {
margin:0;
border:0;
padding:0;
height:100%;
width:100%;
}
.content{
display:table;
width:100%;
border-collapse:separate;
height:80%;
}
.Col{
display:table-cell;
width:30%;
height:100%;
}
#header,#footer{
height:10%;
position:relative;
z-index:1;
}
</style>
</head>
<body>
<div id="header"><textarea style="background-color:orange;">H Just a test</textarea></div>
<div class="content">
<div id="left" class="Col"><textarea style="background-color:lightskyblue;">A Just a test</textarea></div>
<div id="center" class="Col"><textarea style="background-color:green;">B Just a test</textarea></div>
<div id="right" class="Col"><textarea style="background-color:lime;">C Just a test</textarea></div>
</div>
<div id="footer"><textarea style="background-color:yellow;">F Just a test</textarea></div>
</body>
</html>
One drawback is that the divs must be specified in a particular order which is bad for search-engine optimization and for screen readers; this, however, is not important for the intended web application.
/ Frank
