Table Cell Auto Stretching When Height Is Defined

rsearing · November 24th, 2006, 01:30 AM

Table cell auto stretching vertically when defined height
--------------------------------------------------------------------------------

I am new to HTML and will have to beg if this is obvious, but I am trying to design a table that looks like:

********************************
*----A------*------------------------*
************------------------------*
*------------*------------------------*
*------------*------------------------*
*----B------*------------C----------*
*------------*-------------------------*
********************************

Basically I want A to be defined height of 100 PX and C to vary depending upon the content. B should autostretch to accomodate C. What is happening, however, is that A is stretching beyond the 100 PX. When C is shorter than 100 px, however, A remains at 100 and C will stretch to accomodate.

Below is my code along with CSS sheet.
I have been working on this for a week and can't seem to find out what I am doing wrong. Any help would be much appreciated!!!

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!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=iso-8859-1" />
<title>Knights Of Columbus Site</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form id="form1" runat="server">
<table id="MainTable" bgcolor="#FFFFFF" align="center">
<tr>
<td id="Banner" colspan="2"><img src="Site_Images/rbanner.jpg"/></td>
</tr>
<tr>
<td id="Sidebarabove" valign="top">
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate >
You are not logged in.
</AnonymousTemplate>
<LoggedInTemplate>
Welcome<br />
<asp:LoginName ID="LoginName1" runat="server" />
<br />
<asp:LoginStatus ID="LoginStatus1" runat="server" ForeColor="Black" />
</LoggedInTemplate>
</asp:LoginView>
</td>
<td id= "MainContent" valign="top" rowspan="2">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td id="Sidebarbelow" valign="top">
<asp:TreeView CssClass="TreeControl" ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"
ForeColor="Black" NodeIndent="10" ShowLines="True">
<SelectedNodeStyle Font-Bold="True" />
</asp:TreeView>
</td>
</tr>
<tr>
<td id="BannerBelow" colspan="2"><img src="Site_Images/banbelow.jpg" runat="server"/></td>
</tr>
</table>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</form>
</body>
</html>

CSS=

body {
background-color: #000099;
}

#MainTable
{
width: 800px;
}

#Banner
{
height: 150px;
width: 800px;
}

#Sidebarbelow
{
width: 150px;
background-image: url(Site_Images/sideback.jpg);
background-repeat: repeat-y;
height:100%;
}

#Sidebarabove {
width: 150px;
height:100px;
background-image: url(Site_Images/sideback.jpg);
background-repeat: repeat-y;
}

#MainContent {
width: 650px;
height: 100%;
}

rsearing · November 24th, 2006, 06:47 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...or how to with table.

HTML:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="newmain.css" 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">sidetop</td>
<td id="main" rowspan="2"><img src="charter.jpg" width="326" height="484" /></td>
</tr>
<tr>
<td id="sidebottom"><p>sidebottom</p>
<p>sdfasdf</p>
<p>safda</p>
</td>
</tr>
<tr>
<td id="bottom" colspan="2">bottom</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;
}

Imar · November 24th, 2006, 08:28 PM

Hi Rob,

Not sure what's causing this. My take is that this has to do with how tables behave: differently from what you expect. They seem to have a will of their own and expand and collapse as they see fit. Not sure how to properly fix this, but I know of a way around this.

Purists may not agree with this solution because it uses tables but it works, it's easy to understand and it's easy to implement. (If you want the purists' solution, search Google for "three column layout" and you'll find some interesting stuff that explains a lot about doing multi column layout with divs and CSS.

That said, let's take a look at your problem. You're having problems because cell A1 seems to stretch. So, the solution is to make A1 not a cell, but a <div> element that listens to CSS a lot better. Below you'll find some sample code that does the following:

1. It has a Header div that stretches the full width of the site.

2. It has a table with two columns and two cells (in total)

3. The left column has two divs: one called Banner (for the block with an exact height), and the other called Menu (for all the other stuff)

4. The right column contains all the other content.

5. It has a Footer div that stretches the full width of the site.

The trick here is to not use colspan and rowspan attributes. Instead, I use a clean two column layout (again, purists will tell you to use two <div> tags that float next to each other) where column 1 holds two separate divs. The first div in this column has a fixed height. The right column contains all the content and can stretch as necessary, without affecting the first div in the first column.

I added some colorful borders so it's easy to see what's going on.

Hope this helps....

Code:

Code:

<!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=iso-8859-1" />
    <title>Untitled Document</title>
    <link href="newmain.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
  body
  {
    margin: 0;
  }

  td
  {
    vertical-align: top;
  }

  #Header
  {
    border: 1px solid red;
  }

  #MainTable
  {
    table-layout: fixed;
  }

  #MainTable, #Header, #Footer
  {
    width: 725px;
  }

  #Footer
  {
    border: 1px solid green;
  }

  #Left
  {
    width: 225px;
  }

  #Right
  {
    width: 500px;
    border: 1px solid black;
  }

  #Banner
  {
    height: 100px;
    border: 1px solid black;
  }

  #Menu
  {
    border: 1px solid green;
  }
    </style>
</head>
<body>
  <div id="Header">I am the header</div>
  <table id="MainTable" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="Left">
      <div id="Banner">I am always 100px</div>      
      <div id="Menu">
        I am a div below the 100px banner block. 
        I can grow, but that doesn't influence the Banner div
      </div>      
    </td>
    <td id="Right">
      I can stretch<br />to whatever you want, 
      but Banner stays 100px
      <br /><br /><br /><br /><br /><br />More Content
      <br /><br /><br /><br /><br /><br />More Content
    </td>
  </tr>
  </table>
  <div id="Footer">Footer</div>
</body>
</html>

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.

rsearing · November 25th, 2006, 01:53 PM

Thank you very much Imar. Just two last questions on this--

1) How can I take that entire table (or content) and have it centered on the page? (ex: http://www.kofc.org/un/index.cfm)
**UPDATE** - answered this myself by putting a "<div>" tag around the entire content and making property "align=center"..this ok?--Although, I'm pretty sure this will "center" everything in it--including text that I might not want centered

2) What purpose is the table-layout fixed rule doing? I've tried removing it--don't see a different.

3) The reason I ask 2 is because I re-wrote my code using your example--the only glitch is that I have to put valign=top on my "left" <TD> or my DIV's don't appear at the top, but centered--why do I do it, but you don't have to center your's? (code below if needed).
**UPDATE** I think I answered this, as well. I believe this came from the <TD> rule you gave for v-align at top?

4) In other forums, people say that (much like you do and acknowledge) I should stay away from tables. My issue is that I do not know how to autostretch a div tag--since it doesn't have a relation to a tag on the side, I can't say "100%"--or so I would think. Is there an easy way to do what you did in example above, but using just div's?

Thanks,
Rob

HTML:
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!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=iso-8859-1" />
<title>Knights Of Columbus Site</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form id="form1" runat="server">
    <div align="center">
        <div id="Banner">
            <img src="Site_Images/rbanner.jpg" />
        </div>
        <table id="MainTable" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td id="left" align="left" valign="top">
                    <div id="Sidebarabove">
                        <asp:LoginView ID="LoginView1" runat="server">
                            <AnonymousTemplate >
                                You are not logged in.
                            </AnonymousTemplate>
                            <LoggedInTemplate>
                                Welcome<br />
                                <asp:LoginName ID="LoginName1" runat="server" />
                                <br />
                                <asp:LoginStatus ID="LoginStatus1" runat="server" ForeColor="Black" />
                            </LoggedInTemplate>
                        </asp:LoginView>
                    </div>
                    <div id="Sidebarbelow">
                        <asp:TreeView CssClass="TreeControl" ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"
                            ForeColor="Black" NodeIndent="10" ShowLines="True">
                            <SelectedNodeStyle Font-Bold="True" />
                        </asp:TreeView>
                    </div>
                </td>
                <td id="right">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </td>
            </tr>
        </table>
        <div id="BannerBelow">
            <img id="Img1" src="Site_Images/banbelow.jpg" runat="server"/>
        </div>
    </div>
</form>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

</body>
</html>

CSS:
body {
    background-color: #000099;

}

#MainTable
{
    width: 800px;
}

#left
{
    width: 150px;
    background-image: url(Site_Images/sideback.jpg);
    background-repeat: repeat-y;
    border-left: black thin solid;
    border-bottom: black thin solid;
}
#right
{
    background-color: #FFFFFF;
    border-left:black thin solid;
    border-right:black thin solid;
    border-bottom: black thin solid;
}

#Banner
{
    height: 150px;
    width: 800px;
}

#Sidebarbelow
{
}

#Sidebarabove
{
    border-bottom:black thin solid;
    height:100px;
}

#BannerBelow
{
    width: 800px;
}

Imar · November 26th, 2006, 06:22 AM

Hi Rob,

1) align=center is a bit outdated. It's better to wrap the entire contents of the page (starting form the <body>) tag in a <div> tag. Give this div an explicit width and a margin of auto and it will center. margin: auto; causes the left and right margin to be divided evenly between the two sides. So:

CSS
#Container
{
  width: 750px;
  margin: auto;
}

HTML
<body>
  <div id="Container">

  </div>
</body>

2) table-layout determines the way how tables are rendered. It influences stuff like column width. Google a bit and you'll find some useful stuff:

http://msdn.microsoft.com/library/de...ablelayout.asp
http://www.quirksmode.org/css/tables.html#tablelayout
http://www.w3.org/TR/CSS21/tables.html#width-layout

3) Yes, correct. Instead of aligning each individual cell with an outdated attribute, you can use this CSS rule to align all tables cells:

td
{
  vertical-align: top;
}

4. Google for "two column layout" or "three column layout". You'll find many examples of multi column layouts using CSS. Once you have the two columns, it's easy to add the <div> with a fixed height to the left column. Additionally, you may want to take a look at the book CSS - Instant Results by Richard York (http://www.wrox.com/WileyCDA/WroxTit...47175126X.html).

Hope this helps and clarifies things,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.

rsearing · November 26th, 2006, 10:26 AM

Thank you very much Imar--you're a lifesaver!

Kind Regards,
Rob