Divs are useful boxes that can be used to store pretty much anything, position items, or even make an entire css layout. There are two types of div attributes, ids and classes. Ids are used for making a single, unique div box (the same id cannot be used again) and classes are used for multiple div boxes (you can use the same class for many divs). Here is the code for id divs:
And here is the code for class divs:
You can put anything in the css for these, but here is an example for id (these goes in between your style tags or on your separate css page):
width: 200px;
height: 200px;
background: red;
align: right;
}
And here is the same style sheet code but for a class div:
width: 200px;
height: 200px;
background: red;
align: right;
}
So you see the only part that makes them different is the # and the div. method of defining them.
Most of the normal css codes work for divs too, plus you can have padding in the boxes and borders around them. You can also use divs as a place to store your links or images so they have a creative backdrop.
Div Positioning
Another handy feature of div boxes is being able to position elements on a page. Just add this to your div code in the css:
top:0px;
left:0px;
Top is how many pixels away from the top you want the element to be, and left is how many pixels away from the left you want it to be. You can just put in approximate numbers and adjust from there. It's that simple. 
If you need a point of reference for help with the numbers, this is what 100px by 100px looks like:
Note: If your layout is centered, this won't work because centered is at a different spot depending on the browser size.
Scrolling Div Boxes
You can also use div boxes to make scrolling div boxes (or blogs, or scroll boxes) simply by adding overflow: auto; to the css. Just add this code between the style tags or on your separate css page:
width: 200px;
height: 100px;
background: #ffff99;
overflow: auto;
}
And then to make the div box show up, add this code where you want the box to be:
background and so much more! blah blah blah type type type text lorem ispum dolor latin stuff blah blah. smiley helper is pretty much the coolest thing ever blah blah blah I'm running out of things to say =P blah blah yada yada
Blogs
You might have seen blogs that look something like this. It's just a graphic combined with a scroll box. For these it's easier to use the css right with the html instead of using an external style sheet like before. (:
background and so much more! blah blah blah type type type text lorem ispum dolor latin stuff blah blah. smiley helper is pretty much the coolest thing ever blah blah blah I'm running out of things to say =P blah blah yada yada turtle turtle turtle I made you out of clay... blah blah
blah blah smiley helper is coolio : D penguin penguin duck chicken turtle swan fish chimpanzee
While you can use tables along with a scrolling div box to accomplish this, that's a real pain in the tushy and an easier way is to put a scrolling div inside of another div. Start with this code. We're going to put the image url for the graphic in the background of a div. Also replace HEIGHT HERE and WIDTH HERE with the height and width of your graphic.
</div>
In between the tags (in the blank space) we're adding a simple scroll box with div positioning in its css. Now we're combining lots of codes! Here is the whole code:
<div style="width: 323px; height: 135px; position: relative; left: 25px; top: 135px; overflow: auto">Your snazzy text goes here</div>
</div>
If you look closely you can see that instead of using position: absolute like we did before (see 'Div Positioning' above), we're using position: relative. Absolute positioning makes the div go somewhere specifically on the page, but relative positioning lets you position something in regards to its position inside the other div. For us this means that we can put it wherever we want on the blog graphic. 
I have the numbers that go with the example gummy bear blog in the code, but yours will be different. Just experiment with changing the width, height, left, and top of the inner div until you get it positioned correctly (hint: at first, change the number by 10 or 50 px at a time and refine it from there). The height and width are for the dimensions of the scroll box, and the top and left are how far away from the top and left it is positioned on the blog.
Probably the most useful function of divs is for css layouts, which is what we'll get to in another tutorial.
