pure css layout for a web application?

Question

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.

Answer 1

Dynamic heights are only a problem if you need to implement a special effect of soem sort or a background image and oftent there are ways around that. It really depends on the Visual Design and what needs to be done to make each "block" flexible to use. Sometimes things arent possible but most of the time they are - they jsut tend to add complexity to the markup. But even that added complexity is easier for me to understand than nested tables :-)

Answer 2

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.

Answer 3

My advice if you want to get things done and spend a ridiculous amount of time on css layout, browser compatibility, CSS reset, fonts:

1. write simple, valid, semantic HTML
2. use a simple CSS framework (like blueprint). You will rely on a simple grid system for positioning and layout.
3. add CSS classes to your HTML
4. add your custom CSS for colors, backgrounds...

Please reconsider using a table layout 'to get it done'; you will be disappointed, especially if you want to add some JS magic later.

Answer 4

I use CSS layouts for my web apps. But, my apps don't have wildly varying information, so I can set the content area and not have to worry about the layout looking "off" because a column is way out of balance with the rest of the content.

If you're having trouble with CSS layout and positioning, I'd suggest tables first, learn more about CSS/HTML positioning, and then convert your layout LATER. I'm sure that it's made for a frustrating experience learning CSS on a "real" project.

In the meantime, get some really good sources for CSS: books by Andy Budd, Simon Collison, Eric Meyer, et. al. Also, go to their blogs and dig into the archives. A really good book for CSS layout, positioning and general use is Beginning CSS Web Development by Simon Collison from APress. All the ins and outs with great working examples.

Answer 5

I would suggest this http://stackoverflow.com/questions/1988692/css-framework-for-ui-development/1990350#1990350

and for equal height quickly use this http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/ although it's not pure css but it's good