1. Home
  2. Forums Index
  3. Browser Side / CSS 11:44 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

XHTML CSS td height = 100%

For the life of me I cant figure out how to make a td 100% height anymore

         

jared0x90

12:31 pm on Apr 26, 2005 (gmt 0)

10+ Year Member



I started redoing my small website in XHTML 1.0 Transitional/CSS last night. One thing I absolutely can not figure out is how to get a td to span the entire length of the page in the browser. it only spans as far as the content of the page right now not to the end of the browser window as I would prefer. below is a snip of the XTHML and CSS i have been trying about anything I can think of to make it work so the code probably looks a bit funky. Thanks for your time. Is there any way I can tell you how to get to my site so you can see what is happening instead of just linking to it? I'm pretty sure if you search for my name you could find it.

section from XHTML
<td width="228" valign="top" align="left" class="sidenav"> <table class="sidenav" cellpadding="0" cellspacing="0" border="0">

my CSS

body{font-family:verdana;font-size:80%;margin-bottom: 0;margin-left: 0;margin-right: 0;margin-top: 0}
a:link{color:#258}
a:visited{color:#426}
a:hover{color:#f60;text-decoration:none}
.dir .breadcrumb{color:#808080}
div.hr{border-top:1px solid #c0c0c0;margin:8px 2px}
div ul{list-style-type:square;color:#638c9c}
.dir i{color:#808080;font-style:normal}
.dir table.thumb img.thumb{border:1px solid #808080}
.dir table.thumb td{vertical-align:top;color:#000}
.copyright_odp,
.copyright_odp a:link,
.copyright_odp a:visited{color:#a0a0a0}
.copyright_odp td{font-size:90%;font-family:sans-serif,Arial,Helvetica}
.copyright{font-size:80%;color:#808080}
.maintable{width : 100%;height : 100%;}
.topnav{width:100%;background-image:url(/topside.gif);}
.sidenav{margin: 0 0 0 0;width:228px;height:100%;background-image:url(/leftside.gif);min-height: 100%;padding: 0 0 0;}
.sidenavheader{background-image:url(/navtop.gif);}

Stormfx

8:41 pm on Apr 29, 2005 (gmt 0)

10+ Year Member



First you have to remember that a TD is a child of TR. TR is the child of TABLE. In order for the TD to have a height of 100%, either the TR (not recommended) or the TABLE have to have a height of 100%. Because the TD can only be 100% of the height of its parent element. So, depending on how you code it, you can do one of two things:

<table height="100%">
........
<td height="100%">

Or, you can class your table and td and specify their settings. Just remember that height/width attributes are limited to the height/width of their parent. Or at least they're supposed to be...

SuzyUK

3:06 pm on Apr 30, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



..also if you're now using an XHTML Doctype, then you will have to specify both the <html> and <body> elements to have a height of 100% in order for the table to know where to inherit it's height from.

with an XHTML Doctype, IE still recognises the <body> element as the root but XHTML compliant browsers correctly see the <html> element as the root ~ the inheritance trail has to trace directly back to its root.

Suzy

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 11:44 pm May 1, 2026