asked on

Div tag within table cell - strech

Hi all,

I don't think this is too difficult, but I'm somewhat new...

I want to put a DIV tag within a table cell. No problem. However, this needs to be a template page, so the amount of content I have in that DIV tag will change, and thus change the height. I want the table cell (really, it's an entire row) to auto-stretch vertically to accomodate the size of the DIV.

Right now, the table cell (row) just stays it's same height, and the DIV lays over the top. I've tried setting or not setting a height on both the table cell and the DIV, nothing's working.

<tr>
	  <td valign="top"><div id="apDiv2">
	    <p>asdasdasdasd</p>
	    <p>asd</p>
	    <p>ads</p>
	    <p>asdasd</p>
	    <p>asd</p>
	  </div>
        </td>
  </tr>

Open in new window

Dorfs

Normally the table scales by itself you could try to add style="height:auto;" to make sure
Also

<table><tr>
          <td valign="top" style="height:auto;" ><div id="Div1">
            <p>asdasdasdasd</p>
            <p>asd</p>
            <p>ads</p>
            <p>asdasd</p>
            <p>asd</p>
          </div>
        </td>
  </tr></table>

Open in new window

stonerome

ASKER

tried, but still does not work...

David S.

Well what styles did you apply to the <div>?

stonerome

ASKER

None at this point.

David S.

Odd. I don't see how what you're describing could happen if you don't have any styles being applied to that <div>.

It looks like you'll need to make a more complete example page for us to look at.

stonerome

ASKER

here's a simple version attached. Note, I put in an arbitary height for the body section, just so you can see how it displays. But, I've tried it with no height, or height set to auto and get the same result.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	width:200px;
	z-index:1;
	background-color: #FF0000;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
 
<body>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="100" valign="top" bgcolor="#9966FF">header</td>
  </tr>
  <tr>
    <td height="25" valign="top" bgcolor="#FFFF00"><p>body that includes div (div tag has red background)</p>
      <div id="apDiv1"> asdf
        <p>asdf</p>
      <p>asdf</p>
      <p>asdf</p>
      <p>asdf</p>
      <p>asdf</p>
    </div></td>
  </tr>
  <tr>
    <td height="100" valign="top" bgcolor="#00FFFF">footer</td>
  </tr>
</table>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

stonerome

ASKER

Thakns for some of this info...much of that code is dropped in automatically from Dreawweaver...unfortunately, I don't always understand what it is...

I do use DocTypes, just didn't have that in the code snippet I sent.

I'll check out the above articles. - Cory

Dorfs

Well if you're up for it, I've found www.htmldog.com a really good site to explane the modern way of webdesigning

Also I checked the output in firefox & IE and it seems to expand just fine

David S.

Ah. DW. Out of curiosity, which version are you using? MX 2004?

SOLUTION

scrathcyboy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

stonerome

ASKER

Scrathcyboy -

I hear you, and know what you're saying makes sense. I did design a few websites, good ones, I think that were all CSS and no tables. I actually prefer it...but I always invariably hit walls with browser compatability issues. If I gave all my divs fixed sizes things would be good, but if I did anything where I wanted vertical autostretching to happen (using containers, etc) invariably I'd have issues with IE. Issues, that countless forums, including this one, were never able to help me solve.

In fact, I've yet to find a true CSS, header/3 variable length columns/footer page that TRULY works in all browsers. I'm far from an expert, but I feel I've chased my tail for over a year pursuing the "table-less design" holy grail, only to have veteran programmers tell me to stick with tables - at least you know what you'll get browser to browser.

Any thoughts there?

I know I'm getting way off subject - I'll then close up this question -

Thanks all for your feedback! Cory

SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

stonerome

ASKER

Sorry - CS3, 9.0