Oh, BTW, when I say 'just use a table' I'm not saying 'abandon using CSS' - there is NO reason that a table layout cannot be as clean as the so-called 'purecss' solutions... and generally it should only take one more tag depth than the CSS one - and use a LOT less hacks and CSS to pull it off.
Take this example of HTML usually found in so called "pureCSS" versions
Code:
<style type="text/css">
#center_area {
clear:both; /* just in case */
}
#right_column {
float:right;
width:192px;
}
#left_column {
float:left;
width:192px;
}
#center_column {
margin:0px 192px;
}
</style>
<div id="center_area">
<div id="left_column">
left column content
</div>
<div id="right_column">
right column content
</div>
<div id="center_column">
center column content
</div>
</div>
if you do that as a table, there is NO reason you cannot be almost as clean. Cellpadding, cellspacing, border, valign, align - these can all be done from the CSS as well, so just don't use them.
Code:
<style type="text/css">
#center_area {
width:100%;
border-collapse:collapse;
table-layout:fixed;
}
#right_column {
width:192px;
}
#left_column {
width:192px;
}
</style>
<table id="center_area">
<tr>
<td id="left_column">
left column content
</td>
<td id="center_column">
center column content
</td>
<td id="right_column">
right column content
</td>
</tr>
</table>
At which point, the term 'splitting philisophical hairs' comes to mind... of course, let's see somebody make a DIV version that pays attention to vertical-align:bottom; in a predictable fashion cross-browser... In fact, the table might be MORE appropriate in the same way that a UL is more appropriate for a list than just dumping the items out, as you are using tags that mean rows and columns, when you are making 1 row of 3 columns.
Which is usually when I'll draw the line - I'll generally try to use non-table layout as much as possible, but the moment I have to resort to a browser specific conditional or want to align the content vertically (not the container), that's when I'll resort to a table... To me, using CSS that you have to 'hide' from other browsers or worse, use a conditional to load an entirely different stylesheet... That's an indication you are likely doing something wrong in the first place, and it's time to rethink your inks.
Originally Posted by mobyme
Bookmarks