Fixed TD height property in HTML

Question

I can't make td "Date" to have fixed height. If there is less in Body section td Date element is bigger than it should be - even if I set Date height to 10% and Body height to 90%. Any suggestions?

<tr>
  <td class="Author" rowspan="2">
    <a href="#">Claude</a><br />
    <a href="#"><img src="Users/4/Avatar.jpeg" style="border-width:0px;" /></a>        
  </td>
  <td class="Date">
    Sent:
    <span>18.08.2008 20:49:28</span>
  </td>
</tr>
<tr>
  <td class="Body">
    <span>Id lacinia lacus arcu non quis mollis sit. Ligula elit. Ultricies elit cursus. Quis ipsum nec rutrum id tellus aliquam. Tortor arcu fermentum nibh justo leo ante vitae fringilla. Pulvinar aliquam. Fringilla mollis facilisis.</span>
  </td>
</tr>

And my css for now is:

table.ForumThreadViewer td.Date {
  text-align: left;
  vertical-align: top;
  font-size: xx-small;
  border-bottom: solid 1 black;
  height: 20px;
}

table.ForumThreadViewer td.Body {
  text-align: left;
  vertical-align: top;
  border-top: solid 1 black;
}

table.ForumThreadViewer td.Author {
  vertical-align: top;
  text-align: left;
}

It's working for FF but not for IE. :(

Answer 1

CSS .Date { height: 50px; }

Answer 2

I don't fully understand your question, you're saying if you use this:

.Date {
height: 10%
}
.Body {
height: 90%;
}

That the .Date td is bigger than it should be? How do you know how big it should be without setting an absolute height? Are you taking borders and padding into account?

You could try adding colspan="2" to the .Body td or an extra element with only a non-breaking space ( )

Answer 3

When you use percentages, they're relative to their container and even then, that only works on some types of element. I imagine for this to work, you need to apply the height to the <tr>s, and give the <table> a height. If the <table> height is relative too, you need to give its container a height too.

But looking at your data, are you really sure you should be using a table at all?!

Answer 4

Oli is right! Give then screenshot you posted, you are using the wrong markup. You could use something more like this:

<div class="post">
  <div class="author">
    <a href="#">Claude</a><br />
    <a href="#"><img src="Users/4/Avatar.jpeg" /></a>        
  </div>
  <div class="content">
    <div class="date">Sent: 18.08.2008 20:49:28</div>
    <div class="body">
      This is the content of the message.
    </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

with css like this:

div.post {
  border: 1px solid #999;
  margin-bottom: -1px; /* collapse the borders between posts */
}
div.author {
  float: left;
  width: 150px;
  border-right: 1px solid #999;
}
div.content {
  border-left: 1px solid #999;
  margin-left: 150px;
}
div.date {
  border-bottom: 1px solid #999;
}
div.clear {
  clear: both;
  height: 0;
  line-height: 0;
}