Alex Rivera | Logout

Getting a table to fill 100% height in a td

Asked 2012-03-26T02:57:27.663
12

I'm trying to rewrite a site in proper HTML. The site I'm trying to replace was a complete mess. I've run into a problem where I can't get a <table> to fill the height of the <td> it's contained in. I've tried setting height: 100% on the <table>, which based on google and stackoverflow research should work, but I must be missing something stupid. I had tried to do the same thing with <divs> before switching to tables, but I'm not opposed to going back to <divs> if someone can suggest how to do it.

The content I'm developing is currently here: http://96.0.22.228/

Due to project time constraints, I've had to use bad hacks to get the pages looking correctly. I'm not declaring a <doctype> and I'm forcing IE to use IE7-quirks mode. I'd love to have recommendations on how to do this layout in a proper manner using HTML5 and CSS. It does not have to support older browsers, but it does have to look the same in the latest versions of Chrome, Firefox and IE. I'd also like to to do away with the images for the menus and style everything in CSS for the border frames and the menu text.

Even though I've had to complete the site as is, I'm open to going back and fixing it later if there's a good answer to this problem.

css html html-table
Edit
Report

1 Answer

0

So it's done here with divs, absolute positioning in %, and here's the part you won't like, with a specific height set in pixels. The trouble is, if you use table cells (td) the td's don't have height, and so any element inside will calculate 0 for 100% height.

When we use div's the problem is different. We can make sure they retain their height property, but there's no way to tell the div on the left, "be the same height as the div in the center." At least no way I know of. That being said, it seems like your flash object is the tallest thing, and you could easily set the height of all three div's at a pretty pixel perfect amount. Then stretch the ul navigation list to the height to 100% of the div it's nested within.

There's one other way to do this, that might meet your needs better, I'll detail it at the very bottom.

body,
html {
  background: black;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#left {
  position: absolute;
  top: 10%;
  left: 0;
  background: #eeeeee;
  width: 20%;
  padding: 2%;
  margin: 0;
}

#right {
  position: absolute;
  top: 10%;
  left: 76%;
  background: #eeeeee;
  width: 20%;
  padding: 2%;
  margin: 0;
}

#center {
  position: absolute;
  top: 10%;
  left: 24%;
  background: #dddddd;
  width: 48%;
  padding: 2%;
  margin: 0;
}

#flash {
  background: red;
  width: 500px;
  height: 500px;
  padding: 0;
  margin: 0;
}

ul {
  height: 500px;
  padding: 0;
  margin: 0;
  padding-left: 25px;
  background: #4359ac;
  color: #ffffff;
}

li {
  height: 10%;
  padding: 0;
  margin: 0;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TheDavidFactor's Layout</title>
answered 2012-03-26T19:51:10.063

Your Answer