I'm going to be working on a project soon that requires strict div usage - no tables.

I can do it, I know the tricks. But I don't understand what the allure is. If you have a clean top-down layout, no columns, divs are prefered. If you have a two column layout, you can still get by with divs. If you have a three column layout, you have to use lots of tricks. If you do more than a simple grid, it gets complicated.

In complex designs you have to use wrapper divs - divs within divs within divs within divs - to accomplish the same thing you could do with one table. I've heard a counterargument before that once you've wrapped multiple divs within a div, you're basically recreating a table, at which point it's more logical to use a table.

I just want to get your feedback/opinions on this.

If you have a three column layout, you have to use lots of tricks.

Not really... I just use absolute positiond DIVs for the side columns, and a DIV for the body with it's left and right margins set to that of the columns. Not to 'tricky'.

Yes, DIVs can get a little bit nested, but there's no problem with that. Just have a DIV every time you want a natural block-level DIVision. e.g. I use a DIV for my main content, nest a DIV for a form container, nest a DIV for each row, then SPANs for the form labels and elements. It's far more versatile than a table...

To me, absolute positioning is as bad as using frames. It's like the GOTO of web design.

I use div's to keep my layout and my content seperated when coding. I find articles are easier to update if you don't have to look through all the coding of using tables. By using div's I can keep all my layout information in a css file and all my content in a php file.

Just my opinion!

SagaLore,

You raise some interesting questions. I too am currently in the process of taking the leap from tables to strictly divs and asked myself some similiar questions. While some of the diehards on this website will probably disagree with me, I still think that tables do have there place in some design, and have seem many hybrid div/table designs online that seem to work really well. As for your question about "divs within divs within divs," I used to think that as well until I discovered some websites online that use divs for three column layout and have less code than nearly all the sites I have seen.

One good example is from the BlueRobot Layout Resevior at: http://www.bluerobot.com/web/layouts/ This guy really seems to know his stuff and you can see and use his source code to get you going. He also has hacks in his code for absolute positioning of divs so that IE browsers won't freak out. His code is really clean and and easy to follow, I would reccomend that you check it out.

As for the broader picture it has been interesting to watch the arguments on both sides on Webmaster-Talk, things are definitely in transistion and it seems like divs are replacing tables, like tables replaced frames a few years back. Guess we have all have to keep up, but I don't think we should throw the baby out with the bathwater because tables have their important place in webdesign and probably won't ever completly go away.

Anyway, I'll get off my soapbox now! Good luck and check out BlueRobot.com

Kaiman

Storm King Design

To me, absolute positioning is as bad as using frames. It's like the GOTO of web design.

Why?

Remember that things that are absolutely positiond aren't completely static. I had panels in a column on the right of one of my pages that are absolutely positioned, but were absolutely positioned to the right of the screen, not the left - resulting in a fluid design.

In web design, some things need to be statc, and some things need to be dynamic, and others need to be static in relation to something else. CSS+DIVs handle this exceptionally.

IMO, hacks are the GOTO of web design. It results in invalid CSS. A better way would be to use server side browser sniffing to dish out 'correction' style sheets to only those browsers you know choke at the valid code.
OK, so you know your hack works in IE, Firefox and Netscape. Great. You've catered for all of 3 browsers. Now imagine a new browser comes out, say, for a mobile phone. Imagine this browser is written exactly to CSS and XHTML specification, but it chokes at your hack. Using hacks, you havn't catered for this ficticious browser, however, by dishing out vald CSS to all unknown browsers you have.

tables, divs, whatever... tables are ok. css absolute positioning is fine. css relative positioning is good. a knowledgeable designer can do well using any of them. unless you have large site where management is a concern, designers should use what is most comfortable for them...

Kaiman: I've seen the bluerobot examples, one of the first sites I've seen div+css explained. In the 3 column layout, start resizing your browser narrower and narrower... see the problem?

I think there needs to be a new html element called <grid>. It would be transitionary between divs and tables. Inside the <grid> would be <cell>'s. The matrix would be completely symmetrical - can't have a single cell span multiple cells. How many <cells> per row would be simply defined by <grid col=3>. Now that would be useful.