HTML Design Help

Greetings,

Here is the basic framework of a Web site I am putting together.



<table id="site_table">
<tr>
<td class="site_left"></td>
<td class="site_center">
<table id="main">
<tr>
<td colspan="2" class="header">
//HEADER AREA
</td>
</tr>
<tr>
<td class="navigation">
//NAVIGATION
</td>
<td class="main">
//BODY
</td>
</tr>
</table>
</td>
<td class="site_right"> </td>
</tr>
</table>


CSS:

body {
background:#E3E8EE;
width:100%;
height:100%;
}

#site_table {
width:100%;
height:100%;
border-collapse:collapse;
}

#site_table .site_left {
width:50%;
}

#site_table .site_center {
width:760px;
min-width:760px;
max-width:760px;
height:100%;
background:#ffffff;
vertical-align:top;
padding:0px;
border: 1px solid #4A5C6F;
border-style: none solid none solid;
}

#site_table .site_right {
width:50%;
}

#main {
margin:0px;
border:0px;
padding:0px;

}

#main .header{
background:#ffffff;
vertical-align:top;
}

#header {
width:100%;
text-align:center;
background: #0B447F;
height:100%
padding:0px;
margin:0px;
border:0px;
}

#main .navigation {
width:180px;
min-width:180px;
background:#0B447F;
padding:1px;
border:0px;
margin:0px;
vertical-align:top;
height:100%;
}

#main .main {
padding:15px;
vertical-align:top;
height:100%;
}

You can actually take a look at the site at www.neable.org. The bottom part of the site is what is stumping me. I need the navigational section (the column to the left that houses the navigational tree, dark-blue background) to be at 100%. I cannot get it to do that. Does anyone know how i can make the navigational section be 100%? Height="100%" does not work and plus its doesn't validate.

TIA

-Ironchef

Looking at it in IE6 and NS7.1 on a PC, the site looks fine! What "bottom part" are you talking about?
-ts

Yes - it looks fine in all browsers and if a user has there resolution set at 1024 x 768; however, a small percentage of users might be using 1152 x 864 or larger it does not expand all the way to the bottom. I need it to do that. Any ideas, anyone?

Can you explain "expand all the way to the bottom"? You don't have enough content to push it down to the bottom. Are you looking to have a bunch of white space in the content area if the resolution is bigger? You want the content box to be the height of the screen, regardless of resolution?
-ts

By "it", I assumed he was referring to the entire layout. If that is the case, you could also center it vertically. Here is an example used by a very helpful member from another forum site:


<table....>
<tr....>
<td valign="middle">
The content of your body
</td>
</tr>
</table>


Note that it only used one table cell. Here is his demo:
http://garyblue.port5.com/webdev/vcenter.html

Hate to say it, but since the min-height value is squirrelly, you might have to do it the old way with the table:

<table height="100%"...

If that's not working, then it's because you've effected the table with you CSS sizing.

otherwise you set your CSS in that table to have a:

min-height: 100%;


So at minimum it is 100% of the browser window, but that will not work for every browser, so you may be stuck with the table height value. Not the nicest thing, but neither is using tables for layout always:)

Also, please put your code in code brackets like I did -- it helps keep the forums fresh scented and clean :D

...you'll notice it is the number sign # button in reply screen :thumbsup:

If you want a validated version, which I prefer as well, this article has an excellent work around:
http://www.alistapart.com/articles/footers/

(off-topic): Gotta love smilies!