Drifting Designs Tutorials > > Coding > > HTML > > Div Element
Basic Div Code
If you've been rummaging through other people's source codes often, like many people inevitably do, you'll have noticed that the "Div" element is quite common. It's main purpose is to position the content of your webpage. For example, on this webpage, I've used two Divs, which you can distinguish by the two gray rectangles of this page: one that carries the main site banner at the top, and the one at the bottom that contains all the text.
It might be hard to understand the concept of a Div, but it's really quite simple. See below to see how to use it.
Basic Div Code
1)The following is a basic Div code. Add it to the Body part of your page.
Content Goes Here
</div>
2) Where it says "name" after "id", change that to a name of your Div, or as I simply do, label it "Label 1" or "Label 2". The names aren't a necessary attribute; they just distinguish one div from another and thus are easier to work with.
3) The best things about Divs are that they can be positioned using absolute positioning. Where it says style="position: absolute; left: 100px; top: 100px; , change the "100px" of the left or top area to how many pixels you want the div element to be situated from the left and top of the computer screen.
4) Where it says "width: 800px; height: 800px;", change that to the number of pixels wide and tall you want your div element to be, respectively. If you don't want any restrictions as to your length of your div, such as me with this div, then take out the "height" attribute altogether, and you will not be restrained.
5) Where it says background-color:#FFFFFF; change "#FFFFFF" to the hexadecimal of the color you want your background to be.
6) Where it says overflow: auto;, leave it either as "auto" or "noscroll". Leaving it as "auto" means that once you have so much content in your div that it starts overflowing the height and width boundaries you've set for it, scrollbars will appear. If you don't want scrollbars to appear, then change "auto" to "noscroll." With "noscroll", your div will simply stretch out of it's height boundaries once your content starts overflowing.
|
