Think I deserve a present? See my Amazon Wish List

HTML Table Height Woes

Height attribute not standards compliant.

For years and years, like many web designers, I've been making use of the height attribute within a table to get the layouts that I want, often I've used a system whereby the navigation will be a coloured vertical strip; an easy way to acheive this and maintain backward compatibilty with old borwsers was to use height=100% in a table like so:

<table height="100%">
<tr><td valign="top" bgcolor="#cccccc">Navigation</td>
<td valign="top">Content</td></tr>
</table>


Unfortantly, the HTML standard published by the World Wide Web Consortium (W3C) and now adopted by most browsers is that there isn't a height attribute for tables. The thinking seems to be, that tables should be used for presenting tabular information and not for layouts. Fair enough, but what can the real world use to get the layouts our clients want?

Content and layout are supposed to be seperate in this brave new world wide web, so judious use of style sheets seems to be in order. Firstly I've replaced the table with DIV tags:

<div class="nav">
Some navigation stuff
</div>
<div class="content">
Some Content.
</div>


The classes I've deifined in a seperate style sheet as

.cont {
position: absolute;
top: 0;
left: 0;
background-color: #cccccc;
layer-background-color: #cccccc;
vertical-align: top;
height: 100%;
width: 100%;
}
.cont p, ol, ul, form, h1, h2, h3, h4, h5, h6 {
margin-left: 10%;
margin-right: 35%;
}
.nav {
position: absolute;
top: 0;
left: 75%;
background-color: #ccccff;
layer-background-color: #ccccff;
vertical-align: top;
height: 100%;
width: 25%;
}
.nav p, ol, ul, form, h1, h2, h3, h4, h5, h6 {
margin-left: 5%;
margin-right: 5%;
}


Problems with this method are that while the pages continue to look okay in IE, in netscape the coloured area is only for the window size, so if content is larger than the window then the colour disappears. Resize the browser so that the content is larger than one page and scroll down.

See an example, CSS centred layer with two columns and CSS centred layer with background image.

The Cheat / Hack

There is no true solution, but you can . Add a background image like so, where the image is the the width of column you need.

Any tips you've got gratefully received!

I want to avoid using lengthy / messy Javascript to calculate the length of content/page and then complete the height attribute dynamically.

BTW, I've tried some experiments in the liamdelahunty.com/tips/layouts folder.

Share this!