Table cell auto stretching vertically when defined height

**drhowarddrfine** · Nov 24 '06, 01:29 PM

1) It's harder with the asp code tangled in this
2) Tables for layout is stupid
3) I have never used tables for layout so I have a hard time figuring it out. Divs would make this easy.
4) If you say a cell is 100%, it has to be 100% of what? It's the parent of that element. So the parent is what size? If that's not established then you won't get what you want; and so on up the ladder.

**rsearing** · Nov 24 '06, 10:20 PM

Actually, the error occurs with just a simple example--see HTML below. Basically, I am trying to get a table that has two cells on the left and one on the right. I want it so that the top cell on left is fixed height, and the one right below it is the one that will stretch as the one on the right stretches vertically.

If you can show a simply div example of how to do this, it would be much appreciated.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitl ed Document</title>
<link href="newmain.c ss" rel="stylesheet " type="text/css" />
</head>

<body>
<table width="725" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td id = "top" colspan="2">top </td>
</tr>
<tr>
<td id="sidetop">si detop</td>
<td id="main" rowspan="2"><im g src="charter.jp g" width="326" height="484" /></td>
</tr>
<tr>
<td id="sidebottom" ><p>sidebotto m</p>
<p>sdfasdf</p>
<p>safda</p>
</td>
</tr>
<tr>
<td id="bottom" colspan="2">bot tom</td>
</tr>
</table>
</body>
</html>

CSS:
#top {
height: 150px;
width: 800px;
}
#sidetop
{
height: 100px;
width: 150px;
border-left-color: black;
border-bottom-color: black;
border-top-style: dotted;
border-top-color: black;
border-right-style: dotted;
border-left-style: dotted;
border-right-color: black;
border-bottom-style: dotted;
}
#sidebottom {
height: 100%;
width: 150px;
}
#main {
height: 100%;
width: 650px;
}
#bottom {
height: 150px;
width: 800px;
}

**rsearing** · Nov 24 '06, 11:23 PM

One last thing--If I do this with DIV tags, how can I make the one on the left auto stretch to the main on the right? I am using a repeating background image on the sidebar on the left. If the tag doesn't stretch, then the main will be extending down and the sidebar color will stop at the defined height.

**drhowarddrfine** · Nov 25 '06, 12:40 AM

Now you're asking me to work.
Look at this
and through these.

I saw something there similar to what you want.

**rsearing** · Nov 25 '06, 02:26 AM

First, Thank you VERY much for your time. I have to tell you, I'm a very inexperienced newbie at this...and basically learned CSS 2 weeks ago, and was using DWeaver .. and then viewing the resulting code.

The first link you provided does appear to be what I need--although, with absolute positioning..ca n i still center the table (err...the main "div") on a page..so that I have an area that is a set width that is centered?

Is there an example you can have thats perhaps a little easier to understand or that goes through it with a bit more explanation?

I am trying to do a site for my church (gratis) and appreciate the help---I am sorry if a bother...I thought I was doing fine with the table---I haven't really begun to work with DIV tags.

I can make ID's fairly easily---but anything other than an element rule, class rule or ID rule -- it's a little confusing.

Sigh---any tutorial you can think of that helps with stretching DIV tags?

Basically, what I was trying to do was have a sidebar that will match the height of the main content on the right. The side bar was going to be cut in 2 so that I could have a ASP login status on the top and then a sitemap in the one below that...I'm sure there's plenty of ways to do this--but the central point I need to understand is how to have a sidebar that will autostretch with the content--kinda like your example.

THANK YOU for any help you might be able to provide. I have posted in three different forums and have been working this for a week--you are the first person to reply.

(Basically--having hard time understanding #outer img#top (what the img#top means) and how the rule (not what is defined within) differs from just an #outer rule---what is the difference of what it applies to?)

Kindest Regards,
Rob

**drhowarddrfine** · Nov 25 '06, 04:36 AM

I've just been in and out here cause of the holidays so it's just hard to want to concentrate. One place to look for tutorials is w3schools.com which has some good stuff.

The problem you are talking about is one of the few problems with CSS in trying to get columns to keep the same height/length. It's really not that hard but it's not obvious either.

**rsearing** · Nov 25 '06, 05:07 AM

I appreciate your time and completely understand.

Do you happen to know of an easy way to do this with the tables then? Basically have it so that--

<TR>
<TD id="sidetop"/>
<TD id="mainContent " rowspan="2"/>
</TR>
<TR>
<TD id="sidebottom "/>
</TR>

So that when I stretch mainContent, sidebottom is stretched instead of Sidetop?

No rush---just trying to figure easiest way to do this that makes sense.

:)

Happy Holidays!
Rob

**AricC** · Nov 25 '06, 10:07 PM

What do you mean that you want to expand the main content? You want that section to expand the width of the page?

**rsearing** · Nov 26 '06, 01:53 AM

No--I'm sorry--what I mean is that I want a sidebar on the left (to have two cells) and a main content page on the right (see table above). What I want is A to always be 100 px and B to actually stretch vertically as C does. With the way tables work--I can't get A to stay--as A & C are in the same <TR>.

Another person said to create a table that is two columns and then put two DIV tags in the left column...

My question is down to this---I am having a hard time understanding how to make a DIV tag stretch vertically...al so how to have it so that you can vertically center something in a DIV tag.

So that if I have:

<Table id="table">
<TD id="sidebar">
<DIV id="sidetop"/>
<DIV id="sidebottom "/>
</TD>
<TD id="maincontent "/>
</Table>

#table {width: 800px}
#sidebar {width:150px}
#sidetop {height 100px}
#maincontent(wi dth 650px}

The reason for the table is to get "sidebar" to stretch with "mainconten t" while leaving "sidetop" to be a fixed height.

Do you know an easy way of doing this with just DIV tags? Please keep in mind I am a newbie at this (sorry).

Last question--how can I vertically align contents of a DIV tag?

Thanks SO much!
Rob

I have question with above...I want "side top" 'DIV' to be aligned at top, but contents to be vertically aligned.

**cpritchard** · Nov 26 '06, 08:54 AM

I think this is what you were asking for...
leftcol.png would be your repeating background image

HTML

<div id="container" >

<div id="topleft">
</div>

<div id="content">
</div>

</div>

CSS

body {
margin:0 auto;
padding:0;
text-align: center;
}

#container {
text-align:left;
margin: 0 auto;
width: 800px;
}

#topleft {
float:left;
background:#999 ;
width:150px;
height:100px;
position:relati ve;
z-index:1;
}

#content {
background-image:url(leftc ol.png);
background-repeat:repeat-y;
background-color:#CCCCCC;
margin-left:-150px;
padding-left:150px;
float:right;
z-index:-1;
width:650px;
min-height:100px;
}

**rsearing** · Nov 26 '06, 06:05 PM

Very close--however (and I have to admit, I am learning on the fly here)--what I am really looking for is a left div that will stretch with the right.

So...your example, the background of the left cell is defined 100 px height.

I might be confusing two things I was working on.

The first thing I was doing was creating a sidebar (left) that really had two div's in it--one on top of the other. One was going to be a login, the other a sitemap.

the content would be on the right.

The top div of the sidebar would be fixed 100px, but the bottom part (the sitemap) would autostretch it's height to match the content on the right.

That was the main thing I was trying to do. To achieve this, I broke it down and figured if I could just learn how to make one column autostretch with the other, I'd be ok.

So--really, all I'm trying to do at this point is find an "easy-to-understand" example of how to put two DIV's side by side and have either stretch it's height to match the other---thus alleviating the need to have a table cell with height=100%..

You example won't autostretch the left to match the right--at least, I dont think--but you might have been doing that to try to solve my "big problem".

At this point, I'd be happy to just understand how to place two div columns side by side and have one match the other when it grows.

Regards,
Rob

**cpritchard** · Nov 26 '06, 08:55 PM

If you really want to do this you need to forget about tables all together (except in the instance that you are actually displaying tabular data). I would advise that you have a look at some basic css tutorials to help you understand the differences between css and using tables to do layout.

In my example the top left "column" will always be 150 x 100, and the main content area will stretch with the content, but will never be less than 100px high. Also the background of the lower left "column" will stretch with the content because it is created by the repeating background image attached to the main content div and shifted 150px to the left. To place a sitemap in the lower left you could define another div in the style sheet, position it absolutely below the top left box and apply the same repeating background image.

Transitioning from tables to css is difficult, but I think the best way to learn it is by doing it, and not using tables ever. There are only a very limited number of circumstances where they are appropriate, and trust me you'll be much better off w/out them.

I'll see if I can find some good css tutorials, or alternatively I would recommend CSS Mastery: Advanced Web Standards Solutions by Andy Budd...I still use it almost everyday.

**cpritchard** · Nov 26 '06, 09:21 PM

I just realized I didn't include a min-height fix for IE 6 in my example, but I don't want to overwhelm you before you get started. :)

**ElPrabu** · Mar 16 '07, 02:50 PM

I don't understand why people would consider using tables something stupid. It was pretty much the standard way of doing things before. Now, yes, using DIVs is the absolute best way of laying out a page. People like to pretend they're smarter than others just because they know of a better method - a method that wasn't even discovered by them. "Using tables is stupid." That's pure ignorance. Using tables is absolutely the best way to ensure a layout, it just so happens it doesn't provide for a good design and doesn't scale well. But mind telling me how all those sites got by before DIVs and CSS? I guess the whole WWW was stupid then, huh? It's called progression. There's nothing stupid about things getting better and some not adapting to them as quickly as others.

Table cell auto stretching vertically when defined height

Table cell auto stretching vertically when defined height

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment