SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Max Height

  1. #1
    SitePoint Guru brent5392's Avatar
    Join Date
    Dec 2005
    Location
    Australia
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Max Height

    Is there a way to make a table cell expand to its maximum height?
    PHP | MySQL | (X)HTML | CSS

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    SitePoint Guru brent5392's Avatar
    Join Date
    Dec 2005
    Location
    Australia
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I understand that, Hold on ill paste my code
    PHP | MySQL | (X)HTML | CSS

  4. #4
    SitePoint Guru brent5392's Avatar
    Join Date
    Dec 2005
    Location
    Australia
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    PHP | MySQL | (X)HTML | CSS


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •