homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Table and Div height adjustment to 100%
adjusting eight of table to be 100% of containg DIV
parisaK




msg:4274446
 6:54 am on Mar 1, 2011 (gmt 0)

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&nbsp;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"> &frac12; 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"> &frac12; leg </td> <td class="col2 cell"> $20 </td> </tr>
<tr class="rowb"> <td class="col1 cell"> &frac34; 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&nbsp;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 &nbsp;(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]

 

webprutser




msg:4274825
 7:10 pm on Mar 1, 2011 (gmt 0)

Testing the code you posted I noticed, by adding table cell borders, that you get different heights because the cells that are empty (in above code the right table has 2 empty cells) take less height, than those that are filled. That means the fonts including padding are more than 20px high. Changing the height in e.g. 30 px results in two equal tables.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved