div stretching

Hi Experts,
I have a DIV inside a 100% height TD. I want to stretch the DIV down to fill the TD from top to bottom. I used height:100% of course but that didn't work. You can see my html code below:
<table width="100%" cellspacing="20" cellpadding="0">
		<tr>
			<td style="width:25%;height:100%"  valign="top">
<div>
  <b class="tracks">
  <b class="tracks1"><b></b></b>
  <b class="tracks2"><b></b></b>
  <b class="tracks3"></b>
  <b class="tracks4"></b>
  <b class="tracks5"></b></b>
  <div class="tracksfg" style="vertical-align:top;height:100%">
	Content
  </div>
  <b class="tracks">
  <b class="tracks5"></b>
  <b class="tracks4"></b>
  <b class="tracks3"></b>
  <b class="tracks2"><b></b></b>
  <b class="tracks1"><b></b></b></b>
</div>
			</td>
 
		</tr>
	</table>

Open in new window

ShopiesAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Tony van SchaikConnect With a Mentor Front-end Web developerCommented:
Why don't you use rowspan and colspan for this:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body><table width="500" border="0" cellpadding="0">
  <tr>
    <th width="265" scope="col">Tableheading</th>
    <th width="229" scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td rowspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
 
 
</body>
</html>

Open in new window

0
 
Tony van SchaikFront-end Web developerCommented:
You can't not just autoheight a div, because a divs height depends on the content.
Try to add these to the div
height:auto !important
height:100%;
0
 
Tony van SchaikFront-end Web developerCommented:
And why not apply a style class to the td see snippet:
But it depends on what you're trying to do.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.tdstyle {
	background:#ccc;
	width:25%;
	height:100%
}
</style>
</head>
 
<body>
<table width="100%" cellspacing="20" cellpadding="0">
		<tr>
			<td class="tdstyle"  valign="top">
<div>
  <b class="tracks">
  <b class="tracks1"><b></b></b>
  <b class="tracks2"><b></b></b>
  <b class="tracks3"></b>
  <b class="tracks4"></b>
  <b class="tracks5"></b></b>
  <div class="tracksfg" style="vertical-align:top;height:100%">
	Content
  </div>
  <b class="tracks">
  <b class="tracks5"></b>
  <b class="tracks4"></b>
  <b class="tracks3"></b>
  <b class="tracks2"><b></b></b>
  <b class="tracks1"><b></b></b></b>
</div>
 
			</td>
 
		</tr>
	</table>
 
</body>
</html>

Open in new window

0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Beverley PortlockCommented:
It can also depend on the browser you use. Some like IE6 do not always render CSS heights properly. You can use javascript to determine the screenheight property and then using this to set the DIV height.

It is anything but ideal...

This is code here that you can adapt

http://www.webdeveloper.com/forum/showpost.php?p=301473&postcount=13
0
 
ShopiesAuthor Commented:
@therealteune I am using style sheets but for here I embedded the stylesheet with the HTML. Thanks for drawing my attention. I used the code as instructed but it didn't work too. I'm sure that I applied the code correctly. See the snippet below:
 
@bportlock:
It's not exactly what you want, but you should be able to adapt it to your needs.

The problem of course is that it is JavaScript. This won't work in all browsers, but most modern, and it won't work period if JavaScript is disabled.
WOW ;)
 
Do you mean guys that the best way is to set the height manually using pxs or pts?
 

			<td style="width:25%;border:1px solid #000;height:auto !important;height:100%;" valign="top">
<div>
  <b class="tracks">
  <b class="tracks1"><b></b></b>
  <b class="tracks2"><b></b></b>
  <b class="tracks3"></b>
  <b class="tracks4"></b>
  <b class="tracks5"></b></b>
  <div class="tracksfg" style="vertical-align:top;">
	
	        <span class="big_text">*9DJB 'D5H1</span><br><span class="sm_text">
<!-- START BLOCK : no_content -->
			DE J*E 'D*9DJB 9DI 'D5H1) -*I 'D"F
<!-- END BLOCK : no_content -->
        {content}
 
 
  </div>
  <b class="tracks">
  <b class="tracks5"></b>
  <b class="tracks4"></b>
  <b class="tracks3"></b>
  <b class="tracks2"><b></b></b>
  <b class="tracks1"><b></b></b></b>
</div>
			</td>

Open in new window

0
 
Tony van SchaikFront-end Web developerCommented:
I'm always using px unless i want to autostretch something. But what our you trying to do with the div inside the td do you want to style it or something different.
0
 
ShopiesAuthor Commented:
Yeah actually I have three block in one place and I want them to strectch all together with the same height wether the content in one of them longer than the others or not.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.