DIV layout buggy-ness

Question

What am I missing about DIV layout?

I read in a tutorial about DIV layout that it is superior to table layout because table layout does not look the same in all browsers.

However, I have the exact opposite experience. Table layouts actually do look the same in all browser, whereas my humble DIV layout attempts do not.

It seems as if designers and programmers both wanted to split layout and content, but did it in different ways:

Designers:

"Let's take out all the layout from the HTML page, so all that is left is the content"

Programmers:

"Let's take out all the content of the HTML page, so all that is left is the layout"

I've purchased a few HTML templates, and while they look nice, I usually end up re-doing them in tables, to get them to obey my wishes.

So, what am I missing? Are you using DIV or table layout? I have sooo many problems with DIV layout not behaving correctly, and differently in different browsers. Is it time for a comeback for table layout? Or have I just not learned to do proper DIV-layout yet?

This question is too general. Please give specific examples with code. — Tyler Holien, Feb 06 '11 at 13:08
Take a look at http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — Sebastian Paaske Tørholm, Feb 06 '11 at 13:10
This isn't really a question is it. It's up to you what you use and feel comfortable using. — Daryl, Feb 06 '11 at 13:11

score 3 · Answer 1 · answered Feb 06 '11 at 13:11

Tables are not for layouting. They are for displaying something as a table. The Div-layouts just give you one thing: Freedom.

Freedom of organizing by CSS. A table is never as flexible as a Div-based-layout. Think of displaying a webpage on a smartphone. By giving it a new css-style you can rearrange your content whereas with tables your content will be stuck in one view.

The more-effort for customzing the layouts for cross-browser-compatibility is definetly worth it.

score 2 · Answer 2 · answered Feb 06 '11 at 13:38

div elements have been around for a decade or so. There are no issues with them. The problem you are having is with CSS. From your frustration, it sounds like you don't understand how CSS works more than anything else. Frequently, new users get more confused when they use old tutorials and Internet Explorer as their test browser.

Always, always use any browser but IE to initially test your markup. Always validate your html and css for correct syntax. Always use a proper doctype. Those steps cure 90% of most ills.

score 0 · Answer 3 · answered Feb 06 '11 at 15:02

One of the reasons for DIVs over TABLEs is readability and therefore maintainability. I literally have some old pages that I can't edit because the nested tables are so complicated.

Example:

<div>content</div>

<table><tbody><tr><td>content</td></tr></tbody></table>

I think the first is easier to read.

As the other comments suggested, you had it backwards. But you need a decent understanding of CSS to move beyond the beginner-level table-based layouts.

DIV layout buggy-ness

3 Answers3