Forum Moderators: not2easy
I know this is a simple problem but I still can't figure it out.
I know the browsers are all correctly displaying the tables with the styles I've written. BUT what are the correct style rules to display individual tables with all thier tops at equal heights.
Right now the tops cascade diagnally down to the bottom right.
I know my styles are just written wrong but can someone check it? Thank you all!
table#wrapperTable {position:relative;width:755px;margin-left:auto;margin-right:auto;border:1px solid purple;}
table#leftSideTable {position:relative;left:0;top:0;border:1px solid red;width:250px;}
table#centerTable {position:relative;left:255px;top:0;border:1px solid blue;width:250px;}
table#rightSideTable {position:relative;left:510px;top:0;border:1px solid green;width:240px;}
table#footer {top:auto;border:1px solid orange;}
The tables follow this format:
<table id="leftSideTable"><tr><td>content</td></tr></table>
<table id="centerTable"><tr><td>content</td></tr></table>
<table id="rightSideTable"><tr><td>content</td></tr>
<!-- The footer table is inside a rightSideTable cell to provide a container block for the footer table -->
<tr><td>
<table id="footer"><tr><td>Footer here</td></tr></table>
</td></tr></table>
Nathan
you could either float the 3 content tables or use position: absolute; for them.
position: relative; means they are appearing relative to the element that precedes them and unless you know the height of them it would be hard to offset them (negative top position) back up to meet the top of their predecessor.
but seeing as how there's a wrapper table already there you could just use it and make the it's cells vertical-align: top; That way you can get your footer nested inside it if you like too.. and you don't need positioning for the other nested tables
e.g.
<style type="text/css" media="screen">
table#wrapperTable {position:relative; width:755px;margin-left:auto;margin-right:auto;border:1px solid purple;}
table#wrapperTable td {vertical-align: top;}table#leftSideTable {border:1px solid red;width:250px;}
table#centerTable {border:1px solid blue;width:250px;}
table#rightSideTable {border:1px solid green;width:240px;}
table#footer {top:auto;border:1px solid orange; width: 100%}
</style><table id="wrapperTable">
<tr>
<td><table id="leftSideTable"><tr><td>left content</td></tr></table></td>
<td><table id="centerTable"><tr><td>content</td></tr></table></td>
<td><table id="rightSideTable"><tr><td>right content</td></tr></table></td>
</tr>
<!-- The footer table is now inside the wrapper table to provide a container block for the footer table -->
<tr>
<td colspan="3"><table id="footer"><tr><td>Footer here</td></tr></table></td>
</tr>
</table>
Suzy
