[Webinar] Streamline your web hosting managementRegister Today

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

How to force inner TD height to 100% of left sidebar

Notice how if the copy on the inner portion of the page is too short the white background stops and the page background shows up.  I want the white background to continue to the bottom of the page where the left sidebar stops.  I have achieved this by adding extra BR tags but I want to add something like 'height=100%' to the TD tag but that doesn't work.

http://gro-n-sell.com/new/avail.php

Any suggestions?
0
djs120
Asked:
djs120
  • 4
  • 4
  • 2
  • +1
1 Solution
 
beeelCommented:
if you specify height of the <TD> to be 100% then <TD> will fill up only the <TABLE> space.
If you want to fill the page then you will also need to set the <TABLE> tag's height to 100%.

<table style='height=100%'>
<tr>
<td style='height=100%'>
</td>
</tr>
</table>

i think that is what you want.
0
 
seanpowellCommented:
Simply add the white background color to the containing cell:


<td width="560" valign="top" bgcolor="#ffffff"> <------ right here

<table width="100%" cellspacing="0" cellpadding="3" border="0">
      <tr>
            <td width="560" bgcolor="#425941" align="left" valign="middle">


(And try and move away from tables for layout, they can be difficult to maintain.) At the very least, start to bring in CSS (Cascading Style Sheets) for presentation instead of spacer gif's.

For instance, instead of creating a table row with a spacer gif:


      <tr>
            <td colspan="2">
            <table cellspacing="0" cellpadding="0" border="0">
                  <tr>
                        <td width="253"><a href="index.php"><img src="images/gnsLogo.gif" width="253" height="81" border="0"></a></td>
                        <td width="473" height="81" valign="bottom" align="right">
                        <a href="index.php" class="whiteLink">Home</a> | <a href="contactUs.php" class="whiteLink">Contact Us</a>
                        <img src="images/spacer.gif" width="1">
                        </td>
                  </tr>
            </table></td>
      </tr>
      <tr>
            <td colspan="2" bgcolor="#000000"><img src="images/spacer.gif" height="3"></td>
      </tr>


apply the 3 pixel border with css instead:


      <tr>
            <td colspan="2">
            <table cellspacing="0" cellpadding="0" border="0" style="border-bottom: 3px solid black;">
                  <tr>
                        <td width="253"><a href="index.php"><img src="images/gnsLogo.gif" width="253" height="81" border="0"></a></td>
                        <td width="473" height="81" valign="bottom" align="right">
                        <a href="index.php" class="whiteLink">Home</a> | <a href="contactUs.php" class="whiteLink">Contact Us</a>
                        <img src="images/spacer.gif" width="1">
                        </td>
                  </tr>
            </table></td>
      </tr>


Another item, your form tags are improperly placed, they must reside within the td cell.

So this:

<form action="avail_browse.php" method="GET">
<td width="157">
</td>
</form>

becomes this:

<td width="157">
<form action="avail_browse.php" method="GET" style="display:inline;">
</form>
</td>

note the addition of the inline style attribute - it prevents the additional vertical space that the form generates.

Thanks,
Sean
0
 
James RodgersWeb Applications DeveloperCommented:
change your td tag

<td width="560" valign="top">
to

<td width="560" valign="top" bgcolor="#FFFFFF" height="100%">

should do the trick
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
seanpowellCommented:
No need for the height declaration Jester - td cells will always be the same height.
Just adding the bgcolor to the cell as noted above is all you need.

Sean
0
 
James RodgersWeb Applications DeveloperCommented:
noted...

just noticed you had it in your code, i didn't refresh before posting sorry

hate trying to do too many things at once
0
 
djs120Author Commented:
Thanks a lot Sean, that worked perfectly.

And thanks for the CSS tips.  I have been pondering moving over to a full CSS/div design but just haven't mustered up the strength to pour through the work to convert the layout to CSS.  Thanks a lot.
0
 
seanpowellCommented:
We're here when you get the strength:
http://www.experts-exchange.com/Web/Web_Languages/CSS/

And thanks for the A :-)
Sean
0
 
djs120Author Commented:
Heh, I'll be sure to come back for moral support.  Thanks again.
0
 
djs120Author Commented:
Sean, quick followup to your earlier comment about the FORM tag needing to be inside the TD.  I moved it and it now creates a large space underneath the dropdown: http://www.gro-n-sell.com/new/avail.php.  Let me know if I should post a new question for this, but I remember having to move the FORM tag outside of the TD in order to remove the space.

Thanks.
0
 
seanpowellCommented:
Read through my comment above again, espescially this part:

<form action="avail_browse.php" method="GET" style="display:inline;">

Note - that is just as an example, if you add this to your stylesheet:

form { display:inline; }

then your html can stay as it is now.

Thanks,
Sean
0
 
djs120Author Commented:
Worked perfectly, again!  I'd give you more points if I could, but I'm sure there will be plenty of questions to come...
0

Featured Post

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

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