CSS Creator Side-by-side tables with 100% height

Code requested, instead of links, so here you go...

Posted: Sun, 2008-08-17 16:28

No answer on this question, so I'm including the code as requested instead of the links to the page and the css.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<HEAD>
<TITLE>USA Signal Technology, LLC. - Private</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">

<style type="text/css">
<!--
-->
</style>
</HEAD>
<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top" bgcolor="#FFFFFF"><table width="103%" border="0" cellspacing="0" cellpadding="0">
      <tr>

        <td width="160" valign="top"><table width="176" border="0" align="left" cellpadding="0" cellspacing="0"  bgcolor="#BF2128"  id="left_nav_table">
          <tr>
            <td width="9" background="images/default_11.jpg"><IMG WIDTH=1 HEIGHT=6 ALT=""></td>
            <td width="160" background="images/default_12.jpg"><IMG WIDTH=1 HEIGHT=6 ALT=""></td>
            <td width="10" valign="top" bgcolor="#FFFFFF"><img src="images/default_13.jpg" width="6" height="6"></td>
          </tr>
          <tr>
            <td rowspan="2" background="images/default_19.jpg"><IMG WIDTH=1 HEIGHT=37 ALT=""><IMG WIDTH=1 HEIGHT=155 ALT=""></td>
            <td class="boxHeaderText"><div align="center">filter/Sort by </div></td>

            <td rowspan="2" background="images/default_21.jpg">&nbsp;</td>
          </tr>
          <tr>
            <td width="160"><table id="left_nav_table" width="150" border="0" cellpadding="5" cellspacing="0" class="bodyNavigation">
                <tr>
                  <td height="30"><div id="left_nav" align="center"><span><a class="left_link" href="#">PO Numbers</a></span></div></td>
                </tr>
                <tr>

                  <td height="30"><div id="left_nav" align="center"><span><a class="left_link" href="#">Packing Lists</a></span></div></td>
                </tr>
                <tr>
                  <td height="30"><div id="left_nav" align="center"><span><a class="left_link" href="#">Part Numbers </a></span></div></td>
                </tr>
                <tr>
                  <td height="30"><div id="left_nav" align="center"><span><a class="left_link" href="#">Pallet Numbers </a></span></div></td>

                </tr>
                <tr>
                  <td height="30"><div id="left_nav" align="center"><span><a class="left_link" href="#">Serial Numbers </a></span></div></td>
                </tr>
                <tr>
                  <td height="30"><div id="left_nav" align="center"><span><a class="left_link" href="#">« GO »</a></span></div></td>
                </tr>
                <tr>

                  <td valign="top"><div class="bottom_nav" id="po_pack_part">
				  		  <a href="#">Receive Parts</a><br>
                          <a href="#">Transfer/Relocate </a><br>
                          <a href="#">View Part History</a><br>
                          <a href="#">View Shipments</a><br>
                          <a href="#">View Inventory</a><br>

                    </div>
                      <div id="po_pack_part_bottom">&nbsp;</div></td>
                </tr>
                <tr>
                  <td height="32"><div id="left_nav" align="center"><span><a class="left_link" href="#">Help</a></span></div></td>
                </tr>
              </table>
                <p align="center"><b><font color="#FFFFFF">Corporate Office <br>

                  469-522-0280</font></b></p>
              <p><br>
              </p></td>
          </tr>
          <tr>
            <td><IMG SRC="images/sitemap_94.jpg" WIDTH=9 HEIGHT=9 ALT=""></td>
            <td background="images/sitemap_95.jpg"><IMG SRC="1" WIDTH=1 HEIGHT=9 ALT=""></td>
            <td><IMG SRC="images/sitemap_96.jpg" WIDTH=7 HEIGHT=9 ALT=""></td>

          </tr>
        </table></td>
        <td align="left" valign="top"><table id="main_content" width="104%" border="0" cellpadding="0" cellspacing="0"  bgcolor="#FFFFFF">
          <tr>
            <td width="10"><img src="images/default_11.jpg" width="9" height="6"></td>
            <td width="100%" background="images/default_12.jpg"></td>
            <td width="9" valign="top"><img src="images/default_13.jpg" width="6" height="6"></td>
          </tr>
          <tr>

            <td width="9" background="images/default_19.jpg"></td>
            <td valign="top" bgcolor="#FFFFFF">
                <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
                  <tr>
                    <td nowrap="nowrap"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="bodyNavigation">
                      <tr>
                        <td width="400" valign="baseline" class="bodyNavigation"><font color="#000000">You are here: </font><a href="index.html">Home</a> <font color="#000000">&gt; </font><a href="#">Shipment Viewer &gt; View Selector </a></td>

                        <td valign="top" class="bodyNavigation"><form name="loginForm" method="post" action="">
                            <label>User: </label>
                          <input name="user2" type="text">
                            <input type="submit" name="Submit32" value="Log out">
                        </form></td>
                      </tr>
                    </table></td>
                    </tr>

                  <tr>
                    <td valign="top" height="37" class="bodyWelcome"><table width="100%" border="0" align="right" cellpadding="0" cellspacing="0">
                      <tr>
                        <td width="200" class="greeting"><div style="width: 200px; text-align: left">Welcome LADOTD</div></td>
                        <td width="115" height="35" class="top_tabs"><div align="center"><font face="Tahoma, Verdana, Arial, Helvetica, sans-serif">Receive</font> </div>
                            </div></td>
                        <td width="115" height="35" class="top_tabs"><div>

                            <div align="center"><font face="Tahoma, Verdana, Arial, Helvetica, sans-serif">Transfer</font></div>
                        </div></td>
                        <td width="115" height="35" align="left" class="top_tabs"><div>
                            <div align="center"><font face="Tahoma, Verdana, Arial, Helvetica, sans-serif">History</font></div>
                        </div></td>
                        <td width="115" class="top_tabs"><div>
                            <div align="center"><font face="Tahoma, Verdana, Arial, Helvetica, sans-serif">Shipments</font></div>

                        </div></td>
                        <td width="115" class="top_tabs"><div>
                            <div align="center"><font face="Tahoma, Verdana, Arial, Helvetica, sans-serif">Inventory</font></div>
                        </div></td>
                        <td width="auto" height="35">&nbsp;</td>
                      </tr>
                    </table></td>
                    </tr>

                  <tr>
                    <td valign="top" nowrap="nowrap"><table width="100%" height="100%" border="0" align="left" cellpadding="0" cellspacing="0">
                      <tr>
                        <td height="36" valign="top" bgcolor="#FFFFFF" class="page_title"><p>INVENTORY VIEWER &gt; Choose your view </p>
                          </td>
                      </tr>
                      <tr>

                        <td height="16" valign="top" bgcolor="#FFFFFF" style="padding:0 0 10px 10px"><table width="453" border="0" align="left" cellpadding="0" cellspacing="0" id="ship_table">
                          <tr>
                            <td height="32" colspan="3" align="left" valign="middle" nowrap>Serial Number:
                              <input name="textfield" type="text" size="40">
                                <input type="submit" name="Submit" value="Go"></td>
                          </tr>
                          <tr>
                            <form name="serial" method="post" action="">
                            </form>

                            <td align="center" valign="middle" nowrap><div class="action_table_print_dwnld" id="3"><a class="white_link" href="#">Location </a></div></td>
                            <td align="center" valign="middle" nowrap><div class="action_table_print_dwnld" id="4"><a href="#" class="white_link">Type/Part No. </a></div></td>
                            <td align="center" valign="middle" nowrap><div class="action_table_print_dwnld" id="4"><a href="#" class="white_link">Status</a></div></td>
                          </tr>
                          <tr>
                            <form method="post" action="">
                              <td height="32" colspan="3" nowrap><table width="471" border="0" cellpadding="0" cellspacing="0">

                                  <tr>
                                    <td width="55%" align="left"><span>Report Name:&nbsp;</span>
                                        <input type="text" name="reprtName" size="18">
                                    </td>
                                    <td width="43%" height="32" align="right" style="padding-right: 8px"><span>No. of Records:&nbsp;</span>
                                        <input type="text" name="records" size="6">
                                    </td>
                                  </tr>

                              </table></td>
                            </form>
                          </tr>
                          <tr>
                            <td width="151" height="29" align="center" valign="middle" nowrap><div class="action_table_print_dwnld" id="3"><a class="white_link" href="#">Download to Excel </a></div></td>
                            <td width="151" height="29" align="center" valign="middle" nowrap><div class="action_table_print_dwnld" id="4"><a href="#" class="white_link">Print</a></div></td>
                            <td width="151" height="29" align="center" valign="middle" nowrap><div class="action_table_print_dwnld" id="4"><a href="#" class="white_link">Export</a></div></td>

                          </tr>
                        </table></td>
                      </tr>
                      <tr>
                        <td align="left" valign="top" bgcolor="#FFFFFF" class="bodyLower"><table class="main">
                          <tr>
                            <th nowrap><div align="center"><font color="#FFFFFF" size="2">Type </font></div></th>
                            <th nowrap><div align="center"><font color="#FFFFFF" size="2">Color</font></div></th>

                            <th nowrap><div align="center"><font color="#FFFFFF" size="2">Part Number </font></div></th>
                            <th nowrap><div align="center"><font color="#FFFFFF" size="2">Serial Number </font></div></th>
                            <th nowrap><div align="center"><font color="#FFFFFF" size="2">P.O. Number </font></div></th>
                            <th nowrap><div align="center"><font color="#FFFFFF" size="2">Ship Date </font></div></th>
                            <th nowrap><div align="center"><font color="#FFFFFF" size="2">Packing List # </font></div></th>
                            <th nowrap><div align="center"><font color="#FFFFFF" size="2">Ship VIA </font></div></th>

                            <th nowrap><div align="center"><font color="#FFFFFF" size="2">Tracking No. / BOL</font></div></th>
                            <th nowrap><div align="center"><font color="#FFFFFF" size="2">LOT No.</font></div></th>
                            <th nowrap><div align="center"><font color="#FFFFFF" size="2">Pallet No.</font></div></th>
                            <th nowrap><div align="center"><font color="#FFFFFF" size="2">Status</font></div></th>
                            <th nowrap><div align="center"><font color="#FFFFFF" size="2">Location</font></div></th>
                          </tr>

                          <tr>
                            <td nowrap>Content</td>
                            <td nowrap>&nbsp;</td>
                            <td nowrap>&nbsp;</td>
                            <td nowrap>&nbsp;</td>
                            <td nowrap>&nbsp;</td>
                            <td nowrap>&nbsp;</td>
                            <td nowrap>&nbsp;</td>

                            <td nowrap>&nbsp;</td>
                            <td nowrap>&nbsp;</td>
                            <td nowrap>&nbsp;</td>
                            <td nowrap>&nbsp;</td>
                            <td nowrap>&nbsp;</td>
                            <td nowrap>&nbsp;</td>
                          </tr>
                          <tr> </tr>

                        </table></td>
                      </tr>
                    </table></td>
                    </tr>
                </table>
				</td>
            <td background="images/default_21.jpg"></td>
          </tr>
          <tr>

            <td><IMG SRC="images/sitemap_94.jpg" WIDTH=9 HEIGHT=9 ALT=""></td>
            <td width="100%" background="images/sitemap_95.jpg"></td>
            <td><IMG SRC="images/sitemap_96.jpg" WIDTH=7 HEIGHT=9 ALT=""></td>
          </tr>
        </table>
          <div align="center"><a href="index.html">BACK TO INDEX</a></div></td>
      </tr>
    </table>

    </td>
  </tr>
</table>
</BODY>
</html>

CSS:

html, body {
	font-family: Tahoma, Tahoma, Arial;
	margin: 0;
	padding: 0;
	height: 100%;
	border: none;
	background-color: /*#276698;*/ #333333;
}

#container { height: 100% }

div blockquote { 
	margin: -5px 0 -5px 0;
	padding-left: 20px;
}

iframe { 
	width: 100%;
	height: 100%;
	border: none;
}

form { 
	width: 400px;
	/*padding: 5px;*/
}

form table td { padding: 5px; }

table#form_login { padding: none; }

/*form#serial { 
	background-color: #FFF;
 	color: #000000;
 	border: 1px solid #C00000;
 	font-family: Tahoma, Verdana, Arial, sans-serif;
 	font-size: 10px;
 	text-align: left;
	padding: 3px;
}*/

h4 { font-size: 16px; color:#C22127 }

.login {
	font-family: Tahoma, Tahoma, Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	line-height: normal;
	text-transform: none;
	color: #000000;
	background: url(images/login_subheader_top.gif) bottom;
	background-repeat: no-repeat;
	height: 36px;
}

.login_bottom {
	background: url(images/login_subheader_bottom.gif) top;
	background-repeat: no-repeat;
	height: 36px;	
}

.login th { bottom }

#red_subheader {
	background: url(images/red_subheader_bg.gif) repeat-x top;
	height: 36px;
}
	
#red_subheader_bottom { 
	background: url(images/red_subheader_bottom_right.gif) no-repeat right;
	height: 36px;
}
	 
.bodyNavigation {
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	padding: 2px 10px 3px 6px;
	/*margin-bottom: -5px;*/
}

.div_border { 
	background: #C22127;
	border: 1px solid #FFFFFF;
	padding-bottom: 2px;
}

/*#left_nav_table { height: 100% }*/

.filterBy {
	font-size: 12px; 
	font-weight: bold;
}

.top_tabs { 
	background: url(images/tab_red_down.png) no-repeat top;
	padding: 0 3px 0 3px;
}	

.top_tabs a { color: white; }

.top_tabs td { 
	width: 200px; 
	text-align: center;
	font-weight: normal;
	color: white;
}

#details_table { 
	border: solid #666 1px;
	padding: 12px;
	margin-bottom: 12px;
}

#main_content { 
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: .9em;
	font-style: normal;
	font-weight: bold;
	text-transform: none;
	color: #000000;
	height: 100%;
}

html,body,table#main_content { height: 100% }

.page_title { 
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: bold;
	text-transform: none;
	color: #CC0000;
	padding: 10px 0 0 10px;
}

.leftMiddle {
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: x-small;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: capitalize;
	color: #666666;
}

.bodyWelcome { 
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	text-transform: none;
	color: #FFFFFF;
	padding: 0 10px 0 10px;
	background: url(images/default_58.jpg) repeat-x top;
}

.greeting { font: normal bold 16px Tahoma, Verdana, Arial, sans-serif; }  

.bodySearch {
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: x-small;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #666666;
}

.bodyLower {
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
	line-height: normal;
	text-transform: none;
	color: #000000;
	padding: 0 15px 0 10px;
}

.leftLower {
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: xx-small;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #666666;
}

.bodyFooterTab {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: xx-small;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #666666;
	text-align: center;
	vertical-align: middle;
}

.bodyFooterText {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: xx-small;
	font-style: normal; 
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFFFFF;
	text-align: center; 
	vertical-align: middle;
	text-decoration: none;

}

.boxHeaderText {
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: uppercase;
	text-decoration: none;
	height: 37px;
	background: url(images/default_20.jpg) top;
	background-repeat: no-repeat; 
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	padding-top: 5px;
}

.table_col_header {
	font: 900 .9em Tahoma, Verdana, Arial, sans-serif;
	color: #FFFFFF
	background-color: #666666;
}

a {
	text-decoration: none;
}
.bottom_nav { 
	line-height: 1.5; 
	font-weight: bold;
	font-stretch: condensed;
	width: 130px;
}

.bottom_nav a { font-weight: bold; }

.bottom_nav a:link { font-weight: 600; color: white; }
.bottom_nav a:visited { font-weight: 600; color: white; }
.bottom_nav a:hover { font-weight: 600; color: yellow; }

a.left_link:link { font-weight: bold; color: white; }
a.left_link:visited { font-weight: bold; color: white; }
a.left_link:hover { font-weight: bold; color: yellow; }

a.white_link:link { font-weight: bold; color: white; }
a.white_link:visited { font-weight: bold; color: white; }
a.white_link:hover { font-weight: bold; color: yellow; }

.blue_bg { 
	background-color: #194D99;
	color: white;
	border: 0 2px 0 2px solid  #DA4040 ;
}

.red_bg { 
	background-color: #DA4040;
	color: white;
	border: 0 2px 0 2px solid ;
	border-color: #194D99;
}

#left_nav { 
	font-size: 12px;
	background-image: url(images/link_box.gif);
	background-repeat: no-repeat;
	background-color: #DA4040;
	height: 21px;
	width: 150px;
	padding-top: 4px;
}

#po_pack_part { 
	background: #194D99;
	padding: 10px;
	color: #FFFFFF;
	background-image: url(images/po_pack_part_top.gif);
	background-repeat: no-repeat;
	background-position: top; 
 }
 
#po_pack_part a { color: white; }

#po_pack_part_bottom { 
	background-image: url(images/po_pack_part_bottom.gif);
	background-repeat: no-repeat;
	height: 19px;
}

#left_heading { 
	font-weight: bold;
	font-size: 12px;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
}
.navText {
	color: #FFFFFF;
	text-decoration: none;
}

#report_table, #report_table td {
	color: #194D99;
	border: solid #CC0000 1px;
	padding: 2px;
	border-collapse: collapse;
}
/*#report_table td {
	width: 156px;
	height: 32px;
}*/

#report_table div { 
	background-image: url(images/link_rpt_box.gif); 
	background-repeat: no-repeat;
	height: 26px;
	width: 150px;
	padding-top: 3px;
	margin-bottom: -4px;
}

#welcome_table div { 
	background-image: url(images/link_rpt_box.gif); 
	background-repeat: no-repeat;
	height: 26px;
	width: 150px;
	padding-top: 3px;
	margin-bottom: -4px;
}

#welcome_table a:link { font-weight: 600; color: white; }
#welcome_table a:visited { font-weight: 600; color: white; }
#welcome_table a:hover { font-weight: 600; color: yellow; }

.action_table_print_dwnld { 
	background-image: url(images/link_rpt_box.gif); 
	background-repeat: no-repeat;
	height: 26px;
	width: 150px;
	padding: 3px 3px 0 0;
	margin-bottom: -4px;
}

.padding_left { padding-left: 8px; }

.red_border_top_right_bottom { 
	border-top: 1px solid #cc0000;
	border-right: 1px solid #cc0000;
	border-bottom: 1px solid #cc0000;
}

.red_border_right { border-right: 1px solid #cc0000; }

.red_border_bottom { border-bottom: 1px solid #cc0000; }

.red_border_left { border-left: 1px solid #cc0000; }

.red_border { border: 1px solid #CC0000; }

#ship_table div { 
	background-image: url(images/link_rpt_box.gif); 
	background-repeat: no-repeat;
	height: 26px;
	width: 150px;
	padding: 3px 3px 0 3px;
	/*margin-bottom: -4px;*/
}

#report_table a:link { font-weight: 600; color: white; }
#report_table a:visited { font-weight: 600; color: white; }
#report_table a:hover { font-weight: 600; color: yellow; }

table.main a {color: white; }

table.main {
	border-width: 1px 1px 1px 1px;
	border-spacing: 3px;
	border-style: solid solid solid solid;
	border-color: #333 #333 #333 #333;
	border-collapse: collapse;
	background-color: white;
}
table.main th {
	color: #FFFFFF;
	border-width: 1px 1px 1px 1px;
	padding: 3px 3px 3px 3px;
	border-style: solid solid solid solid;
	border-color: #333 #333 #333 #333;
	background-color: #CC0000;
}
table.main td {
	border-width: 1px 1px 1px 1px;
	padding: 3px 3px 3px 3px;
	border-style: solid solid solid solid;
	border-color: #333 #333 #333 #333;
	background-color: white;
	font-size: 12px;
	font-weight: normal;
	color: #000;
}
/*.navLink {
	color: #003366;
}*/

Jack A

thepineapplehead

Moderator

Posts: 9209
Joined: 2004-06-30
Location: Milton Keynes

Er .... can we see the code?

Posted: Thu, 2008-07-24 10:05

JackyBoy

Enthusiast

Posts: 72
Joined: 2007-01-20
Location: Dallas Texas USA

Here's a page:

Posted: Thu, 2008-07-24 21:31

Here's a page: http://www.andrewsontheweb.com/usasigdotnet/inventory_viewer_results_iframe.html

and here's the css: http://www.andrewsontheweb.com/usasigdotnet/style.css

The two tables I refer to are the left nav table and the container table to the right of that with the id="main_content"

Thanks.

Ed Seedhouse

Guru

Posts: 2613
Joined: 2005-12-14
Location: Victoria British Columbia

The page being such a mess

Posted: Sun, 2008-08-17 20:22

The page being such a mess might have contributed to the lack of replies. It is replete with invalid html and invalid CSS, frowned on around here. It uses tables incorrectly for layout and is, all in all, a ghost from the 1990's.

I suggest you tear it down and start over with modern methods. There is only one bit of tabular data on the page and only that data should me marked up with tables.

Most of the folks here have moved beyond tables for layout, invalid and unsemantic code, and non standards triggering document types. Thus those with the old skills needed to "fix up" a page like that, based on methods from the past, are few and far between around here.

If I was handed the page to "fix up" I would not even try, I would simply re-code it from scratch to modern semantic standards. I suggest you do the same.

I am not now, nor was I ever, any kind of "dude".

The page is no longer

Posted: Thu, 2008-08-21 12:32

The page is no longer available, but if you can get it uploaded again I'll go through Ed's suggestion of re-writing it with you, so you can see how the page should be constructed by modern standards Smiling

How to code side-by-side tables for 100% height each

Posted: Sat, 2008-08-23 16:56

Thanks very much. Sorry to be so long replying, but my email alert only showed "page no longer available", so I thought it had been deleted.

Here is one link to a page: http://www.andrewsontheweb.com/usasigdotnet/receiving_all_iframe.html
Here is a page with links to several other pages: http://www.andrewsontheweb.com/usasigdotnet/
The css file: http://www.andrewsontheweb.com/usasigdotnet/style.css

These page are pulled into other pages as iframes on the live site. The above is a dev site only. As stated, I began with someone else's markup to try to save time. Didn't work well. Now I'm spending double the time --- or more. Oh, well. I appreciate your help.

Side-by-side tables with 100% height