Table height

Greetings

I have a problem.. I want 2 tables, and one should be above the other so we have table1 and table2

height table1: 130px
height table2: until the end of the screen..

I don't know how to fix the table2 height

here is my code (not nice coded but you'lll get the idea):

<div id="header" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table id="table1" width="800" height="130" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td rowspan="3"> <img src="images/Untitled-4_01.jpg" width="363" height="130" alt=""></td>
<td rowspan="3"> <img src="images/Untitled-4_02.jpg" width="11" height="130" alt=""></td>
<td rowspan="3"> <img src="images/Untitled-4_03.jpg" width="156" height="130" alt=""></td>
<td colspan="8"> <img src="images/Untitled-4_04.jpg" width="270" height="104" alt=""></td>
</tr>
<tr>
<td> <a href="?p=weblog"><img src="images/Untitled-4_05.jpg" width="58" height="17" alt="" border="0"></a></td>
<td rowspan="2"> <img src="images/Untitled-4_06.jpg" width="11" height="26" alt=""></td>
<td> <a href="?p=portfolio"><img src="images/Untitled-4_07.jpg" width="71" height="17" alt="" border="0"></a></td>
<td rowspan="2"> <img src="images/Untitled-4_08.jpg" width="10" height="26" alt=""></td>
<td> <a href="?p=links"><img src="images/Untitled-4_09.jpg" width="36" height="17" alt="" border="0"></a></td>
<td rowspan="2"> <img src="images/Untitled-4_10.jpg" width="13" height="26" alt=""></td>
<td> <a href="?p=contact"><img src="images/Untitled-4_11.jpg" width="60" height="17" alt="" border="0"></a></td>
<td rowspan="2"> <img src="images/Untitled-4_12.jpg" width="11" height="26" alt=""></td>
</tr>
<tr>
<td> <img src="images/Untitled-4_13.jpg" width="58" height="9" alt=""></td>
<td> <img src="images/Untitled-4_14.jpg" width="71" height="9" alt=""></td>
<td> <img src="images/Untitled-4_15.jpg" width="36" height="9" alt=""></td>
<td> <img src="images/Untitled-4_16.jpg" width="60" height="9" alt=""></td>
</tr>
</table>
</td>
</tr>
</table>
</div>

<table id="table2" width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td background="images/table2_bgOut.jpg"> </td>
<td id="table2L" bgcolor="#333333"> </td>
<td width="800" background="images/table2_bgIn.jpg">
<? include('content.php'); ?>
</td>
<td id="table2R" bgcolor="#333333"> </td>
<td background="images/table2_bgOut.jpg"> </td>
</tr>
</table>

my stylesheet:

body {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
}

#header {
width: 100%;
background-image:url('images/Untitled-4_02.jpg');
height: 130;
}

#table2L {
background-image:url('images/table2_bgL.jpg');
background-position: top right;
background-repeat: repeat-y;
}

#table2R {
background-image:url('images/table2_bgR.jpg');
background-position: top left;
background-repeat: repeat-y;
}

#table2 {
height: ???????
}

already thank you for looking at this topic!

hi, the fastest way to fix it was to add this in your stylesheet


html,body {
height:100%
}


and setting your table2 height to 100%

#table2 {
height:100%
}


the problem is, the browser is calculating 100% of the body + your other table being 130px

if your header doesnt have any gif, you could use the table2 as a "full" table with a row on the top including your 130px header

thnx for the reply i'll try this tomorrow to tired now :)

but thanks for the help :)

it didnt work :(

the same result as before after adding the things you said

here is the result: http://www.tehvuune.be/testsite/
(stylesheet: http://www.tehvuune.be/testsite/style.css)

Firstly, view this: http://codingforums.com/showpost.php?p=583820&postcount=2
A CSS layout would be better anyday over a tabular one. I suggest that you upgrade. If you need practice go here: http://www.w3schools.com/css/css_positioning.asp

Nevermind i fixed it:

I take a screenshot of the gray part and putted it als my background :-) bit messy but effect is perfect thanks for help !