Table CSS instead for the layout

Hi hope everything is well. Is anyone else using CSS tables properties to replicate a table without using tables in the code, is their a more educated choice here??? Seems to work in all browsers, and allows more customization. I was motivated when I picked up a old Eric Meyer’s book that used tables, I wanted to re-create the site but did not want tables in my layout.

Here is the [page ](http://raspi-pi.no-ip.org/index.html)

You can certainly do that, and there is a SitePoint book all about this subject (cheekily titled Everything You Know about CSS is Wrong), but it’s not really necessary. Its limitation is that you don’t get as much flexibility in how your organize your HTML. And be aware that it doesn’t work in older browsers like IE7 and under (though that doesn’t matter these days to most people, as fewer than 1% of people use them now).

So a more flexible option might be going with floats or absolute posistioning?

Floats, yes, but not absolute positioning … that’s the worst option of them all, because it’s very inflexible. There are quite a few methods for laying out three column sites, some of them very sophisticated. You could have a look at Paul O’Brien’s site, as it has a lot of examples:

http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

when you say “flexable” you mean a website that grows with new content? For example somthing like a page with a content managent system?

Grows with new content, yes, and also reflows depending on the width of the screen. This isn’t really related to a CMS, though, which is more of a “back end” concern. We are just talking about front end design here, which just involves HTML and CSS in this context.

CSS tables are, as far as I know, the only reliable method for creating two columns that take up 100% of the available space, one fixed width and the other fluid width.

I use them sometimes. There’s nothing semantically wrong with them—not sure why people don’t get that. For more traditional grid-based layouts (all fixed or all fluid) I like to use floats still. Sometimes I use inline-blocks if I can get rid of the whitespace without much trouble…it all depends on the task at hand.

Floats are great once you learn how they work and how to clear them properly.

Here’s one of my favorite CSS Tricks articles: http://css-tricks.com/dont-overthink-it-grids/

It explains how to make a simple, flexible, and reliable grid-based layout (i.e. pretty much any layout) using floats and border-box sizing. This and CSS tables are gonna be the two best ways to do it until we can start using flexbox.

After looking into flexbox, the idea looks pretty good.And since using CSS to design a layout is probably, in my opinion, the hardest part, flexbox what we all want right? Still, tables can be left out for layout nowbecause you can just take some time and find some CSS code that will do the same, or learn javascript and paste that in. Anyways, here is my favorite link on layout http://www.alistapart.com/articles/fauxcolumns/

CSS tables are completely different from HTML tables, though. You’re just telling HTML elements like divs, sections, articles, etc. to BEHAVE like tables, so in my opinion, CSS tables are the best choice for fluid-width multi-column layouts. At least they are if you only care about supporting IE8 and higher (IE6 and 7 aren’t relevant anymore…finally)

But yeah, flexboxes are a godsend. Using floats for layouts has always been a hack that abuses the purpose of floats—and flexbox fixes that at last.

Another option is to float the fixed width column beside a flexible width column with a margin slightly wider than the fixed width column.

There’s nothing semantically wrong with them—not sure why people don’t get that.

One limitation with CSS table layouts is that they are a bit inflexible, making it hard for things to be repositioned at different screen sized—unless you totally rewrite the CSS for various conditions, which is a bit of a pain.

Using floats for layouts has always been a hack that abuses the purpose of floats

Not necessarily. Paul O’B points out that the earliest CSS specs, and their examples, covered using floats for column layouts, so it was always in the minds of the CSS creators.

In this old thread from 4 years ago I point to a link from the w3c some 10 years earlier than that that shows some intended uses of floats and one was for columnar layouts. Unfortunately the link the the test suite has now died (it must be 15 years old now) but as seen from the reply after my post it was conclusive that floats for layout were never a hack but just another tool in the toolbox.