[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 893
  • Last Modified:

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

0
stonerome
Asked:
stonerome
  • 6
  • 5
  • 2
  • +1
3 Solutions
 
DorfsCommented:
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

0
 
stoneromeAuthor Commented:
tried, but still does not work...
0
 
David S.Commented:
Well what styles did you apply to the <div>?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
stoneromeAuthor Commented:
None at this point.
0
 
David S.Commented:
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.
0
 
stoneromeAuthor Commented:
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

0
 
David S.Commented:
No styles? You absolutely positioned the <div>. That's what is causing this. Absolutely positioning an element removes it form the document flow so other elements can't tell where it is.

You should be using a doctype. More information: http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your/

Wow. You're still using that old code for NS4?

The rest of the code you're showing us shows many signs of doing things the old way. It's best to separate presentation from content. You may find this enlightening: http://www.hotdesign.com/seybold/everything.html
0
 
stoneromeAuthor Commented:
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

0
 
DorfsCommented:
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
0
 
David S.Commented:
Ah. DW. Out of curiosity, which version are you using? MX 2004?
0
 
scrathcyboyCommented:
"I want to put a DIV tag within a table cell. No problem."

stonerome -- your fundamental assumption, quoted, of "no problem" -- that is the problem.  

You should not be putting DIVs under (within) table cells and expecting no problem -- it is fundamental design error in HTML coding.  Tables and TD cells automatically wrap and adjust size and position depending on the table layout and the dynamic information going into the table -- they are self buffering.

In contrast, DIVs are NOT anything like tables or TD cells in their inherent actions in browsers.  DIVs are usually fixed in width, often position, and can be made to truncate text that goes into them, regardless of the amount of text.  Tables and cells work in browsers totally different than DIVs can be made to work.

Your solution is very easy -- use tables and cells to autoadjust data by the browser, and use DIVs to fix data, position and size.  DO NOT MIX the two.  That is the root of your problem.  Either use tables, OR use DIVs in tableless layout, and you will not have these problems.
0
 
stoneromeAuthor Commented:
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
0
 
David S.Commented:
@Cory

You didn't answer my question. :p

Have you seen this layout (http://www.pmob.co.uk/temp/3colfixedtest_4.htm) ?

CSS Tables will make tableless layouts easier to make. See http://www.sitepoint.com/blogs/2008/02/28/table-based-layout-is-the-next-big-thing/
0
 
stoneromeAuthor Commented:
Sorry - CS3, 9.0
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 6
  • 5
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now