DIV Tutorial

Divs are a relatively easy code to mess with. They're very neat and clean, unlike tables which can get messy. Try playing around with this code and see what you can make it do:

<div style="border:#COLOR 1px SOLID; background:#COLOR; width:NUMBERpx; height:NUMBERpx; overflow:AUTO;"> YOUR CONTENT GOES HERE </div>

Make sure you replace what's in CAPSLOCK, to your specifications. The overflow: option refers to the scrolling of your div. If you want it to scroll, put AUTO. If you don't want it to scroll, you can either cut that piece out, or put no.

Say you want to be Valid..

Now, if you want to have a valid site, you'll need to use your stylesheet.css to set up your div properties. Here's how it works..

In your XHTML page, use this code to reference your div:

<div id="NAME> blah blah content is here.. blah blah. </div>
You must always remember to close your <div> tag by placing </div> at the end of the content that's inside your div. If you don't, it can screw up all your coding, and your layout may come out looking wacky and broken.

Now, in your stylesheet.css page, use this code:

#NAME { width: numberpx; height: numberpx; border: COLOR #px SOILD,DASHED,etc;}

#NAME is what you want to call your div. It can be anything you want, just make sure it has the # in front of it. Unless you want to use a "class" instead. Then you'd place a . (period) infront of the name, and you'd use <div class="NAME"> in your coding.

Class will be used for divs that appear in numerous places, whereas an ID will be used for a div that appears only once in your site. You can decide which is best for you.