Max Height

**brent5392** · Apr 14, 2006 23:24

Is there a way to make a table cell expand to its maximum height?

**Egor** · Apr 15, 2006 01:04

Hi,

That's exactly what <td> does?

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Hello</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        font: 10px/1.75 "Lucida Grande", "Lucida Sans", sans-serif;
      }

      table {
        width: 600px;
        height: 500px;
        border-collapse: collapse;
        border: 1px solid red;
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <td>Look, I take the height of my parent! <strong>(500px)</strong></td>
      </tr>
    </table>
  </body>

</html>

If I totally misunderstood your problem, please be more specific.

**brent5392** · Apr 15, 2006 01:14

Yes I understand that, Hold on ill paste my code

**brent5392** · Apr 15, 2006 01:17

Template2.php

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>page title</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" class="Table_main">
  <tr>
    <td class="Td_main_top_left">LOGO HERE</td>
    <td class="Td_main_top_right">NAVIGATIONAL</td>
  </tr>
  <tr>
    <td colspan="2" class="Td_main"><p class="Font_heading">PAGE TITLE</p>
      <p>BODY OF PAGE</p></td>
  </tr>
  <tr>
    <td colspan="2" class="Td_main_bottom">JAVASCRIPT CLOCK</td>
  </tr>
</table>
</body>
</html>

Default.css

Code:

html,body {
	height:100%;
	padding:0px;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 14px;
}
body {
	background-color: #000000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a:link {
	color: #00CC00;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #00CC00;
}
a:hover {
	text-decoration: underline;
	color: #00CC00;
}
a:active {
	text-decoration: none;
	color: #00CC00;
}

.Table_main {
	width:100%;
	height:100%;
}
.Td_main {
	width:100%;
	vertical-align:top;
	padding:30px;
	background-color:#005500;
}
.Td_main_bottom {
	height:0px;
	text-align:center;
	vertical-align:middle;
	background-color:#008800;
}
.Td_main_top_left {
	width:20%;
	height:100px;
	vertical-align:middle;
	text-align:center;
	background-color:#00AA00;
}
.Td_main_top_right {
	width:80%;
	height:100px;
	vertical-align:middle;
	text-align:center;
	background-color:#007700;
}

.Font_heading {
	font-size:16px;
	color:#00EE00;
}

Ok yeah, there is a lot of php in there, but basically the php code will like to that css. The problem is, in IE the two td's "Td_main_top_left" and "Td_main_top_right" are stretched more then they should be. This is most likely caused by "Td_main" not having a height, but due to the struture of this page I cannot really specify a height.

User Tag List

Thread: Max Height

Thread Tools

Display

Max Height

Bookmarks

Bookmarks

Posting Permissions