[l008com]

I'm trying to reduce the amount of tables on a few web pages, particularly tables embeded in other tables. I'm still using a main table for the main structure of the page (which I know turns a lot of CSS fanboys into insta-douches).

So I need to make some CSS columns. But not full page columns, just columns inside other objects (in this case, a table cell). The old code just has a 1 x 3 table inside of an existing table cell. I want to emulate that same effect. I want to chop up a table cell into two or three equi-widthed columns, and in each column, have text that may be left justified, center, or right justified.

Also everything is variable width on the site, so the columns have to expand and contract to fill the cell.

I've been playing around with float: left an float: right but I'm really getting nowhere. I tried getting help elsewhere, but if theres even one table on the web page, "CSS Elites" want nothing to do with helping you out. I'd love to have a big debate on why CSS sucks for layout, but maybe sometime when I'm NOT trying to get something done.

[Demonhood]

Want to give us an example or a link?

[l008com]

I found a solution elsewhere. Here's a quick test I did to make sure the technique fit my needs: Fun With Columns Blue and red boxes are divs. The only table on the page is the visible one.

[besson3c]

I would recommend using inline-blocks, which work like display:block elements yet can be set to use precisely as much width and height as desired. While older versions of IE don't support inline-block, they work just fine in all browsers including IE 6 with the following hack:

Code:
.mydiv {
    display:inline-block;
    *display:inline;
    zoom:1
}

This seems like weird voodoo and it is, but it is literally the most useful CSS trick I know. You'll find that IE 6 has a lot of problem with floats in various contexts, so this hack is ironically a much better cross browser solution. It also allows for more optimized SEO since right columns don't need HTML before everything else this way. So:

Code:
#col1 {
    display:inline-block;
    *display:inline;
    zoom:1;
    width:400px;
    vertical-align:top;
    text-align:right;
}

#col2 {
    display:inline-block;
    *display:inline;
    zoom:1;
    width:600px;
    vertical-align:top;
    text-align:left;
}

[l008com]

Yeah that IS how I did it. It works well for some things. But for others, its still not quite as good as a table. It really makes me wonder why tables are so taboo, when they clearly do certain things way better than anything else. But yeah, inline blocks are what I started to use. Another problem with using inline block though is you get weird spacing

[besson3c]

Tables are taboo for layout only, they are immensely useful for their actual intended design: creating actual tables - such as showing the data in a spreadsheet or something. For layout there is no reason to use tables at all, and they are actually far less precise than CSS positioning. For example, if you want a cell to be 400px and you have an image that uses 500px, the width of that cell will be stretched to fit the content. With tables you can't use some animation toolkits that would allow you to do stuff like highlight a row as it is being deleted.

What weird spacing issues have you come across? Are you using a CSS reset library? You should.