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, [I]talic, and [U]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.
Unsolved 
Offline 
