Hi
I am making a page with multiple tables, two tables in each row of wrapped divs, each wrapped in its own div.
my problem is that I can't get the table height to be 100% of its containing DIV. so the table is shorter than its containing div.
not sure what I am doing wrong the page validates fine. any help is apperciated
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Saba's Massage And Beauty Temple</title>
<link rel="stylesheet" type="text/css" href="styles/structure2.css" />
<link rel="stylesheet" type="text/css" href="styles/saba-index-header-footer.css" />
<link rel="stylesheet" type="text/css" href="styles/table2.css" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="animated_favicon.gif" type="image/gif" />
</head>
<body class="bg-default">
<div id="wrap">
<div id="top" class="clearfix">
.......
</div><!-- end top -->
<div class="clearfix"></div>
<div class="panel-wrap clearfix"> <!-- start panel-wrap -->
<div class= "row-wrapper clearfix">
<div class="shift clearfix">
<div class="panel"> <!-- start panel 2 -->
<div class="panel-img">
</div>
<div class="panel-title">
<h1>Ladies Waxing</h1>
</div>
<div class="panel-txt">
<table class="table" cellspacing="0" cellpadding="0">
<tr class="rowb"> <td class="col1 cell"> Eye brow shape </td> <td class="col2 cell"> $12 </td> </tr>
<tr class="rowa"> <td class="col1 cell"> Lip </td> <td class="col2 cell"> $9 </td> </tr>
<tr class="rowb"> <td class="col1 cell"> Chin </td> <td class="col2 cell"> $9 </td> </tr>
<tr class="rowa"> <td class="col1 cell"> Side of face </td> <td class="col2 cell"> $12 </td> </tr>
<tr class="rowb"> <td class="col1 cell"> Full face </td> <td class="col2 cell"> $30 </td> </tr>
<tr class="rowa"> <td class="col1 cell"> Bikini </td> <td class="col2 cell"> $15 </td> </tr>
<tr class="rowb"> <td class="col1 cell"> G-string </td> <td class="col2 cell"> $25 </td> </tr>
<tr class="rowa"> <td class="col1 cell"> Brazilian </td> <td class="col2 cell"> $45 </td> </tr>
<tr class="rowb"> <td class="col1 cell"> Under arm </td> <td class="col2 cell"> $15 </td> </tr>
<tr class="rowa"> <td class="col1 cell"> ½ arm </td> <td class="col2 cell"> $18 </td> </tr>
<tr class="rowb"> <td class="col1 cell"> Full arm </td> <td class="col2 cell"> $25 </td> </tr>
<tr class="rowa"> <td class="col1 cell"> ½ leg </td> <td class="col2 cell"> $20 </td> </tr>
<tr class="rowb"> <td class="col1 cell"> ¾ leg </td> <td class="col2 cell"> $25 </td> </tr>
<tr class="rowa"> <td class="col1 cell"> Full leg </td> <td class="col2 cell"> $35 </td> </tr>
<tr class="rowb"> <td class="col1 cell"> Tummy line </td> <td class="col2 cell"> $10 </td> </tr>
</table>
</div>
</div><!-- end panel 2 -->
<div class="panel" > <!-- start panel 3 -->
<div class="panel-img">
</div>
<div class="panel-title">
<h1>Men Waxing</h1>
</div>
<div class="panel-txt">
<table class="table" cellspacing="0" cellpadding="0">
<tr class="rowb"><td class="col1 cell"> Back </td><td class="col2 cell">$40</td></tr>
<tr class="rowa"><td class="col1 cell">Chest </td><td class="col2 cell">$30</td></tr>
<tr class="rowb"><td class="col1 cell">Stomach </td><td class="col2 cell">$20</td></tr>
<tr class="rowa"><td class="col1 cell">Shoulders </td><td class="col2 cell">$15</td></tr>
<tr class="rowb"><td class="col1 cell">Neck </td><td class="col2 cell">$10</td></tr>
<tr class="rowa"><td class="col1 cell">Eye brow </td><td class="col2 cell">$10</td></tr>
<tr class="rowb"><td class="col1 cell">full Brazilian</td><td class="col2 cell">$70 (Inc. Bottom)</td></tr>
<tr class="rowa"><td class="col1 cell">Bottom </td><td class="col2 cell">$20</td></tr>
<tr class="rowb"><td class="col1 cell">Under arm </td><td class="col2 cell">$18</td></tr>
<tr class="rowa"><td class="col1 cell">Full leg </td><td class="col2 cell">$45</td></tr>
<tr class="rowb"><td class="col1 cell">Full arm </td><td class="col2 cell">$35</td></tr>
<tr class="rowa"><td class="col1 cell">Hands or feet </td><td class="col2 cell">$10</td></tr>
<tr class="rowb"><td class="col1 cell">full body </td><td class="col2 cell">$225</td></tr>
<tr class="rowb"> <td class="col1 cell"> <p></p></td> <td class="col2 cell"><p></p></td></tr>
<tr class="rowb"> <td class="col1 cell"> <p></p></td> <td class="col2 cell"><p></p></td></tr>
</table>
</div><!-- end panel-txt-->
</div><!-- end panel 3 -->
</div><!-- end shift -->
</div><!-- end row-wrapper -->
here is part of the css used
.panel-wrap
{
float:left;
width:100%;
overflow:hidden;
position:relative;
}
.panel-title
{
float:left;
padding:0;
display:block;
width:100%;
}
.row-wrapper
{
clear:left;
float:left;
margin:0;
padding:0;
position:relative;
left:50%;
}
.panel
{
float:left;
padding:5px;
width:350px; /* (230px gets overwritten by width in table page*/
background-color: #ffffff;
border: 1px solid #000000;
}
.panel-img
{
float:left;
padding:0;
display:block;
}
.panel-txt
{
float:left;
padding:0;
display:block;
width:100%;
margin: 0 auto;
height: 100%;
}
.table {
display:block;
background-color: #ffffff;
border: 1px solid #000000;
width:90%;
margin: 10px auto;
height: 100%;
}
.table .rowa {
background: #ffffff;
height: 20px;
}
.rowa:hover { background-color: #D3C4D2;}
.table .rowb {
background: #ffffff;
height: 20px;
}
.rowb:hover { background-color: #D3C4D2;}
.table .cell {
padding: 1px;
border: 0px solid #000000;
}
.table .col1 { min-width: 150px; }
.table .col2 { min-width: 75px; }
.table .col3 { min-width: 75px; }
[edited by: alt131 at 2:36 pm (utc) on May 26, 2011]
[edit reason] Thread Tidy [/edit]
