About DIV tags

[mahe4us]

Hi all,

Can anyone tell whats the use of div tags rather than using table to design the webpages. I have no more idea about this. kindly give your suggestion for this also give tutorial specific for div tags...

[GreenDay2001]

Well div elements are generally used with stylesheets. I mean to assgn a particular id or class to the whole division. Stylesheets would recognize it and than format it as what we have defined in the css code. So in most cases div tags have rather associations with stylesheets.

Today CSS is used to make whole page layouts eather than tables.

[GreenDay2001]

Let me continue from where I had stopped(due to some reason):

So CSS is now used to design th page layouts. It is used to make multicolumn pages, positioned objects etc.

[roryt]

You can apply css to tables.

I think the main argument is :

"Tables are doing a job on web layouts that they were never intended for"

However div tags etc. with CSS were made especially for web page layouts:cheesy:

[MattEvans]

However div tags etc. with CSS were made especially for web page layouts

Apparently so... But they don't do some things that tables do... importantly they don't really have a logical relationship to their hierachal siblings, (and sometimes even their parents/children).

Tables are better for certain elements of layouts; and there's certainly no harm in making tabular data attractive... Table's often aren't the most suitable thing for an entire page's layout... But if they are; it's not really a question of what something was or wasn't designed for, it's a question of how well it does what.

Table's have probably been around since before CSS existed.. they have something of a time-honed reliability that DIV's haven't yet acquired.

[MattEvans]

but, that aside... A div is basically a block of something. It's rectangular, and is comparable with a paragraph. Indeed, if you don't style a div, you might mistake it for a paragraph:

<div>sentance</div>
<div>sentance</div>
looks remarkably similar to..
<p>sentance</p>
<p>sentance</p>

Unlike a paragraph, a div has been designed to be separable from its surrounding markup, by that, I mean it can be moved around. Either laterally, and remaining relative to its siblings (floating) or arbitrarily (positioning). Setting a div to float left: <div style="float:left">la</div> will cause it to behave much like a span element. A span element is an inline element, (that is it doesn't break the layout of text it is a part of. Other inline elements include Bold, talic, and nderline tags, or [A]nchors.)

Floating a div to the left will cause other divs (or text, or anything) logically "after" it in your HTML to be displayed to its right. Floating a div to the right <div style="float:right">la</div> will cause anything logically after it in your HTML to be displayed to its left:

<div style="float:right;"> a complete sentance</div>
<div style="float:right;">This will become</div>

A div that is not floated to the right will appear in exactly the same place as if the floating elements didn't exist. In this case, it will cause the second floating element to 'clear' the first; but only because both floating elements are the same height.

<div style="float:right;"> a complete sentance</div>
<div>breakdown</div>
<div style="float:right;">This will become</div>

To 'esacape' from a load of floating elements, you can use the 'clear' CSS property:

<div style="float:right;"> a complete sentance</div>
<div style="float:left;">This will become</div>
<div style="clear:both;>This will be on the next line.</div>

Using 'clear' means that no subsequently placed elements will be affected by the floating elements.

You can set the background,foreground,fonts,borders,etc, of a div just like a table cell. You can 'legally' put anything inside a DIV, except things that should be in the head element, or a head or body element.

You can also position divs, relatively or absolutely.
Relative:

<div style="position:relative;left:+100px">anything</div>

The DIV will appear close to where it would 'normally' appear (if it had no style), but it will have moved by 100 pixels to the right.

Absolute:

<div style="position:absolute;right:0px;top:0px;width:80px;height:80px;">anything</div>

The DIV will appear aligned to the absolute right of the document, regardless of where the DIV appears in your HTML. It will be aligned by its right edge aswell; and that applies even if the DIV doesn't have a set size, which can be handy.

I will repeat what I said in my last post though. Regarding this "separability" from a surrounding document; in a given a situation this can be useful, or it can be the absolute worst thing to use, and I find that it's rarely a case of 'somehere in-between'. If you want to put two blocks of text next to each other (horizontally), and have them maintain a justified distance to each other regardless of the width of the document; you will probably find a single row table will work better than anything using DIVs.

A DIV is really not much more than an empty block; they have no 'special' properties. With a few exceptions, you can apply any block CSS to any block element, and any text CSS to any block or inline element.

There is, I suppose, one special property for DIVs; the overflow attribute. This doesn't always do what you want it to, but in general, (and providing the DIV is absolutely sized), you can use overflow:hidden, scroll, or auto to respectively; cover up text that would exceed the DIVs absolute size; put scrollbars on the DIV at all times; or put scrollbars on the DIV if the DIV contains text that would otherwise exceed the DIVs absolute size.

Learning and using HTML and CSS appropriately is more important, and will be ultimately more profitable, than learning to design using only DIVs.

[roryt]

Learning and using HTML and CSS appropriately is more important, and will be ultimately more profitable, than learning to design using only DIVs.

That is very true. I know I need to read into that more myself. I do find SPAN very useful sometimes actually.

That is a great post and has some excellent info in it.