Taming the Tableless Model
CSS is always gratifying, for the ones who really care, to create a really usable webpage, which can be viewed by all types of browsers, even text mode ones.
One thing I've always liked about table designs is the infamouse inverted L design, which is something like this:
| Header | |
| Links | Content |
The good thing about this type of design is that the left column always fills the screen as does the top row. Now trying to do the same thing in a pure tableless is really tricky.
There are two really famous ways of doing the two coloumns tableless design, one of which is with the float: left; style, another one is using the position: absolute; and then set the appropriate left and top locations (as well as an optional width and height.
One problem with both of these techniques is that both columns won't have the expanded height.
So, the way to solve it, is to separate your content by div's. Let's call them header, links and main, we'll also add two extra divs for flexibity's sake, we'll name them extraDiv1 and extraDiv2. After that we'll put the main content in a fixed position and then put the links and header divs in their appropriate place with transparent backgrounds. Then use extraDiv1 and extraDiv2 to paint the columns, set the first one with width: 100%; and the second to height: 100%;. Finally put them below the header and links using the z-index.
Now the problem is that if we only set the links column to get height: 100%; if we have a document in main which has 120% height, then 20% of the page will not be filled with the vertical column. To correct this we simply turn the column to fixed instead of absolute.
#header {
position: absolute;
left: 0;
top: 0;
height: 50px;
z-index: 1;
}
#links {
position: absolute;
left: 0;
top: 50px;
width: 200px;
z-index: 1;
}
#main {
position: absolute;
left: 200px;
top: 50px;
}
#extraDiv1 {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 0;
}
#extraDiv2 {
position: fixed;
left: 0;
height: 100%;
z-index: 0;
}