XHTML and Table Height Revisited

Album Cover: Graduation

"Y'all pop the trunk, I pop the hood (Ferrari)."
Kanye West / Good Life

Posted on November 06, 2004 4:01 PM in Web Development
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

About a year ago I posted to my blog about my inability to center content vertically on a page while still complying with the XHTML 1.0 Strict DOCTYPE. Last week, John Wood dropped by to enlighten me with a solution.

John, you're exactly right. Adding CSS height declarations to the html and body elements allows for standard-compliant code and the desired effect. The following code validates as XHTML 1.0 Strict:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>Table Height Test</title>
  <style type="text/css">
   <!--
    html, body {
     height: 100%;
     margin: 0;
     padding: 0;
    }
    table {
     height: 100%;
     width: 100%;
     background-color: #CCC;
    }
    td {
     text-align: center;
    }
   //-->
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>
     Centered Content
    </td>
   </tr>
  </table>
 </body>
</html>

Thanks for sharing that with me!

Comments

Richard on November 07, 2004 at 5:13 AM:

This way also works and validates as strict.

body {
margin: 0;
padding: 0;
font-family: verdana, arial, sans-serif;
text-align: center;
}

Then place the entire script inside this div.

#container {
margin: 0 auto;
width: 720px;
text-align: left;
}

Permalink

Bernie Zimmermann on November 07, 2004 at 10:38 AM:

Richard, your approach doesn't seem to work for me. Maybe I was unclear on what you meant. Just from eyeballing your CSS, though, it looks like you won't achieve the desired result on monitors that are set to resolutions either higher than 720 pixels wide or lower. When you're trying to achieve absolutely centered content in all situations, the source I included above does the trick.

It might be nice to try and do this without tables (which is what it looks like you're trying to do), but then it kind of takes away from the whole point of the discussion, which is tables in XHTML.

Permalink

Paul Coldrey on June 20, 2005 at 10:24 PM:

This is obvious, but it caught me out. If your table lives within a form then you also need:

form {
height: 100%;
margin: 0;
padding: 0;
}

in your style

Permalink

Ruvan Fernando on October 13, 2005 at 3:11 AM:

Paul, thanks for that last post, which incidently explained 3 hours of poking around google.

Permalink

Jorin on February 02, 2006 at 10:13 PM:

Thanks, Paul! I'm glad I continued to read down to your comment!

And I'd be remiss to forget Bernie and John for starting these posts to help me find it.

Thanks EVERYONE!

Permalink

Jorin on February 07, 2006 at 9:23 PM:

Well, I may have spoken too soon....

It was working great for me at first, but now I notice this small "flaw" in what I am trying to do. The problem I am having is evident in the following code:













this should be small
this should be 100%




When viewed in IE6, the table is actually larger than the window because it makes the bottom cell/row equal to the height of the window instead of the height of the window minus the height of the top cell/row.

I only seem to experience this in IE6. Firefox 1.5 renders it as it should.

Any suggestions???

Thanks,
Jorin

Permalink

Jorin on February 07, 2006 at 9:26 PM:

Sorry about that last post, the HTML didnt come through as intended. here it is again.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;width:100%;margin:0;" >
<body style="width:100%;height:100%;margin:0;">
<table style="width:100%;height:100%;" cellpadding="0" cellspacing="0" border="1">
<tr>
<td valign="top">
this should be small
</td>
</tr>
<tr>
<td style="width:100%;height:100%;">this should be 100%</td>
</tr>
</table>
</body>
</html>

Permalink

Susan on March 24, 2006 at 11:55 AM:

Thanks for this trick - you just saved my bacon!

Permalink

Ivan Ċ valjek on November 01, 2006 at 3:19 PM:

I'm having problem with css table height 100% in firefox. I'm working on an ASP.NET project, and it requires controls(and the layout table) to be put inside the form tag, and aparantly firefox 2.0 doesn't like it - table comes out short.

Any ideas?

Permalink

Randy Trulson on April 14, 2007 at 8:36 PM:

Dude, I am so glad you posted this. We are in the middle of rebooting our site and updating it to XTML when I came across this problem. There is so much stuff on our site using table heights and I was pulling my hair out! Thanks a billion.

Sincerely
Randy Trulson

Permalink

Hans Ceelen on May 24, 2007 at 5:28 AM:

I've made a auto-height page with use of tables and div's. And it is XHTML 1.1 valid, without any weird tricks. And it is FF & IE compatible; both using the same css.

Go to the source of this page:
http://www.programmix.nl/project/xhtml11.htm

Permalink

Johann Marx on July 20, 2007 at 9:27 AM:

Argh! I'm going to go insane! LOL!

The method explained in the code above works like a charm... unless the item you're trying to resize is in another DIV.

I have a table on an .aspx page that uses Ajax. And for the LIFE of me... I cannot get this DARN page to size to 100% height. It works like a charm in IE6... but IE7 and FF just plain refuse :(

Is there any other way to get this done, or is this it - the only solution?

Permalink

Grenzer on August 13, 2007 at 1:22 PM:

FF is the issue in this case. I am encountering the same issue at the moment. If the table is embedded into a form tag FF refuses to size the embedded table to 100%. Doesnt matter how much you set the form height to 100%, too! As soon as you move the table out of the form tag the table will adjust it's height to 100% (when you set html and body to 100%, too).

Opera and IE both dont have this problem. It seems to be a FF related issue only. So (even though I wanted to avoid it) I will need a javascript line here (depending where you want to inject that code line you will need to put it into a function... FF tends to ignore javascript that is executed on load and not wrapped into a function)

if(navigator.userAgent.indexOf("Firefox")!=-1)
{
document.getElementById("TableId").style.height = document.body.clientHeight + "px";
}

or in a function

window.onLoad = function(){
if(navigator.userAgent.indexOf("Firefox")!=-1)
{document.getElementById("TableId").style.height = document.body.clientHeight + "px";}
};

Permalink

Julian on August 23, 2007 at 5:54 PM:

Am i the only one who doesn't seem to get this to work? I have a table inside another table. the outter table does the height but the inner table remains the same and the inner table is the one that i need to do the height.
And secondary is there a way to make 3 positions for divs? 4 example i have 3 buttons i want one in the left one in the center and one in the right. But withoud a table. Only way i found is with float but it only goes left and right so the center one isn`t where it should.

Permalink

Lee on August 31, 2007 at 7:50 PM:

Julian, you could use absolute positioning of your div elements to achieve this.

Permalink

Platypus on April 25, 2008 at 7:07 AM:

For others encountering problems setting height to 100%, besides setting the height of all parent elements to 100%, don't forget to set both body _and_ html to 100% height (I couldn't get this working for me in FF until I set html height to 100%, in addition to having all enclosing elements set as mentioned).

Permalink

randy on May 19, 2008 at 1:32 PM:

me voy!

Permalink

haisree on September 15, 2008 at 1:29 AM:

it's very nice tutorial friend.

Permalink

Paul Coldrey on May 22, 2010 at 7:17 PM:

I was interested to see Han's example but the link is dead (http://www.programmix.nl/project/xhtml11.htm). Anyone know where I can check this out?

Permalink

Telephone Answering Service on June 21, 2011 at 10:44 AM:

Even though it was written a bit a ago - any CSS tips are still current. Thanks.

Permalink

theory test on line on November 02, 2011 at 10:24 AM:

Post Comments

If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.

Name:

Email Address:

Website:

Comments:

Check this box if you hate spam.