Forum Moderators: not2easy
Have found this forum very helpful, thanks for everyone's comments. Would like to re-start a discussion about css alternatives to <td valign="middle">. I am working with a site that needs to blend <tables> and css, in the usual transitional manner. Am using a <table> to setup the layout skeleton, and attempting to use css to replace nested <tables>.
Need to left/right align some content, and would like to do so without using separate <td's>, or padding.
Here is some example code:
__________________________
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td style="width: 200px; height: 200px; vertical-align: middle;">
<div style="float: left; border: 1px solid black;">left content</div>
<div style="float: right; border: 1px solid black; height: 100px;">right content</div>
</td>
</tr>
</table>Trying to get 'left content' to align/float in the center of the 100px of 'right content'. Seems this is hard to do. Experimented with some suggestions/links from the previous thread [webmasterworld.com], the following works in IE 6.0 PC, but not Mozilla:
__________________________
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td style="width: 200px; height: 200px; vertical-align: middle;" valign="middle">
<div style="vertical-align: middle; border: 1px solid black; height: 100px;"><div style="float: left; border: 1px solid black; height: 20px; margin-top: -10px; position: relative; top: 50%;">left content</div>
<div style="float: right; border: 1px solid black; height: 100px;vertical-align: middle;">right content</div></div>
</td>
</tr>
</table>Any thoughts would be appreciated.
Thanks,
patrk
Hmm Its a bit tricky. i cant make it align in the middle but maybe we can enclose it in 4 other divs to center it.
<style type="text/css">.border {border:1px solid;border-top:1px solid;}</style>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td style="width: 200px; height: 200px; vertical-align: middle;" valign="middle">
<div style="vertical-align: middle; border: 1px solid black; height: 100px;">
<div style="height: 100px;">
<div style="float: right; border: 1px solid black; height: 100px;vertical-align: middle;position:relative;">right content</div>
<div style="height: 20%;"> </div>
<div style="height: 20%;"> </div>
<div style="height: 20%;"><span class="border">left content</span></div>
<div style="height: 20%;"> </div>
<div style="height: 20%;"> </div></div>
</div>
</td>
</tr>
</table>
This solution works in IE6 and Moz. with the exeption that IE6 wont draw the border-top on the left content, weird.
Hopes this helps you on the way. I would like to see it done more clean then this, though.
Regards
Hafnius
Sorry I can't be any more help - but I try to steer clear of tables-for-layout. Good luck making the transition!
