Solved

div stretching

Posted on 2009-05-11
7
386 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:Shopies
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24355894
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
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24355974
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
 
LVL 34

Expert Comment

by:Beverley Portlock
ID: 24356043
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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 

Author Comment

by:Shopies
ID: 24356196
@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
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24356325
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
 

Author Comment

by:Shopies
ID: 24356455
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
 
LVL 12

Accepted Solution

by:
Tony van Schaik earned 500 total points
ID: 24358134
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

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question