Following on from recent conversations about floats etc, we can
summarise by saying that we can have three basic choices:
1.
#grid {display : table}
#colalpha { width : 58%; padding-right :20px; display :
table-cell; }
#colbeta { width : 38%; background : #f1f1f1; padding : 0 20px;
display : table-cell; vertical-align : middle; }
which works upon the following structure (but only in Firefox and Opera):
<div id="grid" >
<div id="colalpha">
<p>Duis lobortis ultricies elit. Nunc et purus vitae risus
venenatis
molestie. Nullam scelerisque venenatis leo. Quisque sit amet
leo at
lacus rutrum iaculis. Sed auctor lorem eget nisl. Fusce
pulvinar. Nunc
varius pellentesque velit. </p>
<p>Duis lobortis ultricies elit. Nunc et purus vitae risus
venenatis
molestie. Nullam scelerisque venenatis leo. Quisque sit amet
leo at
lacus rutrum iaculis. Sed auctor lorem eget nisl. Fusce
pulvinar. Nunc
varius pellentesque velit. </p>
<p>Duis lobortis ultricies elit. Nunc et purus vitae risus
venenatis
molestie. Nullam scelerisque venenatis leo. Quisque sit amet
leo at
lacus rutrum iaculis. Sed auctor lorem eget nisl. Fusce
pulvinar. Nunc
varius pellentesque velit. </p>
</div>
<div id="colbeta">
<p>Duis lobortis ultricies elit. Nunc et purus vitae risus
venenatis
molestie. Nullam scelerisque venenatis leo. Quisque sit amet
leo at
lacus rutrum iaculis. Sed auctor lorem eget nisl. Fusce
pulvinar. Nunc
varius pellentesque velit. </p>
</div>
</div>
This is the standardista's dream. No floats, all equal length heights
etc. It just doesn't work in most browsers. (That's all! :-)
However, instead of 'pretending' to have a table, you can actually have
one, viz:
<table id="grid" >
<tr>
<td id="colalpha">
<p>Duis lobortis ultricies elit. Nunc et purus vitae
risus venenatis
molestie. Nullam scelerisque venenatis leo. Quisque
sit amet
leo at lacus rutrum iaculis. Sed auctor lorem eget
nisl. Fusce
pulvinar. Nunc varius pellentesque velit. </p>
<p>Duis lobortis ultricies elit. Nunc et purus vitae
risus venenatis
molestie. Nullam scelerisque venenatis leo. Quisque
sit amet
leo at lacus rutrum iaculis. Sed auctor lorem eget
nisl. Fusce
pulvinar. Nunc varius pellentesque velit. </p>
<p>Duis lobortis ultricies elit. Nunc et purus vitae
risus venenatis
molestie. Nullam scelerisque venenatis leo. Quisque
sit amet
leo at lacus rutrum iaculis. Sed auctor lorem eget
nisl. Fusce
pulvinar. Nunc varius pellentesque velit. </p>
</td>
<td id="colbeta" valign="middle">
<p>Duis lobortis ultricies elit. Nunc et purus vitae
risus venenatis
molestie. Nullam scelerisque venenatis leo. Quisque
sit amet
leo at lacus rutrum iaculis. Sed auctor lorem eget
nisl. Fusce
pulvinar. Nunc varius pellentesque velit. </p>
</td>
</tr>
</table>
And this does work, in virtually everything.
So, my (genuine) question is, is this really so wrong? So long as it's
kept really simple, which way is easier to read in a screen reader?
(Include the floated and hacked to death standards version as a third
alternative too).
It seems to me that pragmatism can sometimes outbenefit the religion of
standards - and I'd really like some real world feedback on when such a
table approach causes real problems. (Yes, I know it's not truly
semantic, and I agree that it's a problem because of that).
Thanks
--
Bob
www.gwelanmor-internet.co.uk
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
