Sorry for the long post, but I've been thinking about this for over a year now, and it's been asked many times before without a viable answer that is actually reliably workable in a production environment.
The bottom line is, I still have to resort to using tables for grid-based layouts, because I have had no luck making <div> tags work in certain circumstances. Particularly I am referring to "3x3 grid" layouts where I need to have repeating backgrounds in a tic-tac-toe type of a setup: TopLeft - TopMid - TopRight MidLeft - CENTER - MidRight BtmLeft - BtmMid - BtmRight This the classic "table-based layout" on which Fireworks, ImageReady, Photoshop, and zillions of HTML3 and below sites are based. I have read dozens if not hundreds of posts on various forums, tried various techniques, and even spent hours following the spec: http://www.w3.org/TR/CSS21/tables.html#table-display creating a collection of nested <div>s with the proper CSS to try to replicate what I can do in seconds with a table, to no avail. e.g. <div class="csstable"> <div class="toprow"> <div class="topleft"></div> <div class="topmid"></div> <div class="topright"></div> </div> <div class="midrow"> <div class="midleft"></div> <div class="content">Body Content Goes Here</div> <div class="midright"></div> </div> <div class="btmrow"> <div class="btmleft"></div> <div class="btmmid"></div> <div class="btmright"></div> </div> </div> No matter what I try, I can't get the above working like I can with table, tr, td. Configuration. Not only is it 20% larger HTML, but I have to jump through hoops with CSS and spend hours fiddling with it and eventually failing and re-doing it with a table anyway. For example, one of the most frustrating things is that the "midright" column won't flow down the page to match the height of the content area without adding additional markup, reversing the order of the columns, adding Javascript, or other annoyances. Another example is a rounded-corner design with dropshadows around the edges of a floating "soft panel" in the center of the page. I just haven't found a way to achieve these type of layouts with CSS, though it seems like it ought to be possible. I know you can do amazing things with CSS, and I do strive to remove all style from the markup, but it seems like 98% of the world doesn't care (particularly the client) as long as their page "works." Is it that the browsers don't support what the CSS is supposed to do yet? Or am I incorrect in thinking that display:table; display:table-row; and display:table-cell; etc., are not supposed to help me layout pages... Or am I just a fool for trying? In short, what are all these for, if not layout? table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption } ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
