1

Is this correct and if so, where can I find a good resource to know how to do it, because, all the pages I've seen uses absolute position and things like that. Is this the correct way to go?

EDIT

So my question is , how to put two elements side by side, how one on top of other etc. Is it using absolute position?

For instance this page uses very little table and layout everything in using DIV.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
OscarRyz
  • 196,001
  • 113
  • 385
  • 569
  • possible duplicate of [Tables instead of DIVs](http://stackoverflow.com/questions/30251/tables-instead-of-divs) – Orbling Jun 07 '11 at 23:00
  • @Orbling I looked on that question but didn't find any resource on **HOW** to do it ( lots of interesting points of view of pros-and-cons though ) – OscarRyz Jun 07 '11 at 23:01
  • Never the less, it is much the same question, there are countless other examples of it. Tables should be used for tabular data, grid-like forms and such like. DIVs should be used generally for everything else. Better to look for tutorials on floating, that'll give you more information on layout. – Orbling Jun 07 '11 at 23:04
  • Yeap, my problem is Google returned thousands of tutorial or useless answers like http://stackoverflow.com/questions/6272544/is-my-understanding-divs-should-be-used-instead-of-tables-to-layout-data/6272561#6272561 and I wanted to have a more directed guide – OscarRyz Jun 07 '11 at 23:06
  • I've seen so many tutorials on this subject, usually because someone asks this question and I go off looking for something. They are mainly terrible. I would suggest looking more for [floats and grids in CSS](http://www.google.co.uk/search?q=css+float+grid), that will give you far more information. My personal approach would be to get Firebug fired up, find pages that are built in ways you want and use the inspector looking at the CSS and layout panes to see how they have done it. The trick is to specify the dimensions and know the way CSS positions things. A black art. – Orbling Jun 07 '11 at 23:19
  • Possible duplicate of [Why not use tables for layout in HTML?](https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) – Brian Tompsett - 汤莱恩 Nov 22 '17 at 19:39

6 Answers6

2

Is this correct

Not quite. You should use the elements that best describe the semantics of the data, then use CSS to lay them out.

where can I find a good resource to know how to do it

See section 38 of the WSC: Headers, footers, columns, and templates. Possibly preceded by the earlier sections.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • +1 especially for "You should use the elements that best describe the semantics of the data". Note that `
    ` (and ``) have the specific purpose of having *no* semantics at all, which means that they should generally be avoided as much as possible.
     – Jörg W Mittag Jun 07 '11 at 23:15
  • They are preferable to elements with wrong semantics though :) – Quentin Jun 07 '11 at 23:17
  • Obviously :-) But seeing `
    `s used instead of `

    `, `

      `, `
      `, `
      `, `

      `, `
      `, `
      `, `

     – Jörg W Mittag Jun 07 '11 at 23:20
  • Given that the elements introduced in HTML 5 (still a draft) can only be styled in IE version $common with JS hacks, there is an argument that divs are preferable to them for those purposes. – Quentin Jun 07 '11 at 23:22
  • Actually, I still use them in my HTML, and replace them with `
    ` etc. in a postprocessing step. (I use Ruby and Nokogiri for that.) That way, *I* can *edit* perfectly semantic HTML and still *deliver* perfectly backwards-compatible HTML to the browser.
     – Jörg W Mittag Jun 07 '11 at 23:26
2

You should use DIVs + CSS for layout and TABLE for tabular data.

Here is a good article about the subject

A list apart: Practical CSS

This is a good page to start learning with practical examples CSS positioning

Facundo Casco
  • 10,065
  • 8
  • 42
  • 63
1

Yes, DIVs have been used for some years now. You should also checkout the new layout tags in HTML5 such as <nav>, <section> etc..

Look at this blog post for some interesting comparison of DIV vs tables.

cwallenpoole
  • 79,954
  • 26
  • 128
  • 166
Rand
  • 991
  • 3
  • 11
  • 20
0

I have recently adopted the Blueprint Grid CSS Framework, and really love it. It makes it easy to use divs to layout, without worrying about doing the positioning.

You should read the source. It's very simple, and does use some relative positioning under the hoods. Mostly, it just uses fixed widths to make the grid.

There are many competing frameworks -- some support liquid layouts (non-fixed width).

Lou Franco
  • 87,846
  • 14
  • 132
  • 192
0

Yes, you should try. Use tables only for tabular content.

For starters: From table hell to div hell?

And no: using div's for layout doesn't require positioning, but that depends on the design.

NGLN
  • 43,011
  • 8
  • 105
  • 200
0

Tables should be used for representing tabular data, not for making layouts.

This is a hot topic about this with excellent answers: Why not use tables for layout in HTML?

Layouts without the use of tables aren't necessary to be created with absolute positioning. In tutorials 8 and 9 of this page liquid div layouts are being explained thoroughly, without the use of absolute positioning.

Community
  • 1
  • 1
Midas
  • 7,012
  • 5
  • 34
  • 52