Can div really override table for everything on layouts?

Question

Hi

Maybe there is already a question about this subject, but I couldn't find it.

My question is simple,
Can I use only divs on a page layout?

I got myself in trouble to create a div with corners for example.

A_____B______C  
|            |
D     E      F
|            |
G_____H______I

take all letters as divs with some background, while letter E is where the content is placed, and it is dynamic, so it can get any height, while the width will be 100% for whole window(there is another div as the menu floating left of that div, but I didn't consider it here).
in table I did that really quick with no hack, but with divs I just couldn't.
I couldn't make the height of div D and F expand correctly with divs, the rest was ok

so,
1. can div really replace tables for layout?
2. can div replace tables without css compatibility-hacks?

(btw, that wasn't my only problem with div and css for layouts where table did it easily)

Thanks,
Joe

Answer 1

1. Yes.
2. Sadly, no. Your example will almost certainly require some "hacking" to work in all browsers. Some things that were easy to do with layout tables are very, very complex to implement using pure CSS.

For your example, the following questions should provide you some pointers to work with.

• http://stackoverflow.com/questions/527811/css-vertical-centering
• http://stackoverflow.com/questions/1199144/how-to-set-img-tag-vertical-center-html-css
• http://stackoverflow.com/questions/388180/how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div

Answer 2

Not really answering your question, but Yahoo has some nice grid CSS tools that really help with doing div-based layouts. These might be useful as a reference.

http://developer.yahoo.com/yui/grids/

Answer 3

You should make rows with the divs, as you would with tables.

• Put abc in a div | let's call it div 1
• Put def in a div | let's call it div 2
• Put ghi in a div | let's call it div 3

Let e determine the height of div 2, and let 2 determine the heights of d and f. Using the proper position, such as position:relative, and display:table-cell you should be able to manage.

Not going to create the whole solution.

Answer 4

Your example is completely doable in basic CSS using absolute positioning inside relatively positioned element. Take a look at this:

http://www.ulmanen.fi/stuff/box.php

So, in answer to your question, divs really replace tables for layout.

And what goes for question number two; tables should be used where tables are needed: in tabular data. If you need to present something in a table, use a table. Just don't use them for layout.

Answer 5

1. Yes, you can.
2. • The 'Holy Grail' 3 column Liquid Layout
   • In Search of the Holy Grail—A List Apart
   • or, for the future (as it's not supported in IE 6 or 7), you can just use display: table to get <div> elements to lay out exactly like a table

Answer 6

1. can div really replace tables for layout?

Generally it's worth aiming for. But for everything? No. There are common table constructs which cannot be reproduced with CSS, particularly where you are mixing fixed-pixel, font-relative and viewport-relative measurements in one table. Complex liquid form layouts are the usual case for this.

In theory you could replace <table>, <tr> and <td> with divs styled as display: table-cell et al. However this won't work in IE, and is of questionable usefulness: you are still leaking the layout concerns into the markup just as much as if it were a table. (Plus you can't do spanned cols/rows like this.)

I got myself in trouble to create a div with corners for example.

You mean with image corners? That's really easy. But the trick is not to try to do it by positioning elements. Instead, use nested divs, each with its own background. For example:

<div id="foo"><div class="left"><div class="right">
    Content.
</div></div></div>

#foo { background: url(mainbackground.gif); }
#foo .left { background: url(leftborder.gif) top left repeat-y; }
#foo .right { background: url(rightborder.gif) top right repeat-y; padding: 32px; }

That gives you a left and right border image laid over the main background. You can do the same three times to get a full table-like with 8 border images, or just nest divs nine deep. You can reduce the number of divs required from 3 to 2 if you can include the main background image in one of the border images (this may require very wide images if the element may grow large). You can use padding on some of the elements if you need the border images to be transparent (ie, the main background image isn't to be rendered on the edges).

In the future, this will become much easier and remove the need for so much nested markup, thanks to CSS3's proposed multiple backgrounds per element and border images.