I’m working on a web app that currently has a table-based layout. Ideally I’d like to go to pure css, or failing that, a hybrid tables-and-css layout* .
I’ve banged my head against the wall trying to understand css layouts and positioning. The main problem I’m encountering is that, depending on the state of the app, I have different things appearing in a ‘section’ of the layout — what might be contained in a div or table. For instance, I might have some text and links, and then after user interaction, there might be a form, a table, some images, different text, etc. Anytime I find a css solution, it is for a fixed-element layout, or works in a specific case, etc. They’re not robust solutions, in other words.
From this In Search of the One True Layout, the author about “Vertical placement of elements across grids/columns”: “Designers face the choice of relying on elements being a particular height, resorting to tables or simply not bothering.” Is this true? In my app, I can’t rely on elements being a particular height.
Do I fall back on tables when I have elements of various hieghts ( which is quite a bit of the site, actually). I noticed that quite a bit of sites done by well-respected people and organizations use tables for layout in certain places, and not just for tabular data! This site included.
The chances are that there are CSS techniques to achieve what you want, but they may not be obvious if using CSS for complex layouts is new to you.
In your case, to ‘get it done’, I would recommend a hybrid type layout, and not feel bad about using a table to layout the pieces of the application that require those particular behaviours.
If it is particularly complex and difficult than a table might be the best and simplest approach even for the CSS expert.