Oct 11, 2015
by: Drew
Working with DIVs Beginners guide to working with DIVs

The DIV tag stands for divide, division or dividing, depending on who you're speaking to. I prefer to use divide since it's the shortest word to say of the three. In either case, what the DIV tag does is it separate the object(s), images or whatever else, from the rest of the page for further manipulation via DHTML, XML, JAVASCRIPT, PHP, CSS or any other languages where possible. Like most HTML tags, it begins with <div> and ends with </div>. This page itself makes use of several DIVs to manipulate things you see. Some people tend to make the assumption that DIVs are associated with Layers. However, it is not always true since you can create a DIV without the use of layers. As far as layers go, we'll discuss that a little later. But first, let me list for you three of the most common attributes associated within the DIV tags:

  1. align="?"
  2. style="?"
  3. id="?"

The style attribute is in my opinion the most important one. It controls the use of "inline" CSS and most importantly, layers and all the sub-attributes associated in creating them. But for now, let's put that one aside until we get to the subject of layers. As for the other two, it's pretty obvious what they will do. The align attribute is just what it says. It will align the DIV tag unless the object in question is further directed otherwise. Take note, it will NOT align the content of that DIV. The only three values that will work are, left, center and right. So it would look something like this:

  • align="left"
  • align="center"
  • align="right"
However, keep in mind that the "align" attribute is deprecated and technically should not be used.

As for the id, this is simply a name you're giving to that DIV tag for referencing purposes. It's always good practice to give a DIV a name. It would look something like this:

  • id="pat"
  • id="rex13"
  • id="toe_4"
To be XHTML compliant, never begin an id name with a numeric value. Besides, Mozilla based browsers (Netscape, Firefox, Mozilla), doesn't like it.

Finally, there is the style. Again, this is the start of an "inline" CSS. The style starts off like the other two then the CSS "Selectors", "Properties" and "Values" would fall inbetween its double-quotes. Here, I list some CSS "Properties" that can be applied within the quotes of the style:

  • position:
  • top:
  • left:
  • width:
  • height:
  • z-index:
  • background-color:
  • layer-background-color:
  • visibility:
  • overflow:

Notice that I end each "Property" with "colons". That is absolutely mandatory. Also notice how I have a "hyphen" between a multi-word "Property". That is also absolutely mandatory. There are several more "Properties" along with these but we will cover those in another session. For now, let's concentrate on these. So what do all these mean? Here's the break down:

  • POSITION: Is where the potential DIV will be in the "live" area of the screen (the area that is left after the toolbars, address bar, side bars, etc, etc), and referenced by the top(x=0) and left(y=0). The positioning "Values" are relative, absolute and static. There is yet another position "Value" called, fixed. However, it is only accepted by Macs, and mostly new Macs at that. Being the case, I won't explain about that one. Here are the break downs of the "Values":
    1. relative is positioning a DIV in relation to the other objects that are above and left of it within the live area or within it's encompassing parent (such as another DIV tag). For example, let's say you have a DIV located in the upper-left corner of the live area that's 300x300 px. If you were to nest another DIV within that DIV, the nested DIV would become the "child" to the DIV containing it......which is now the "parent". And let's say that the parent has some text in it along side the child. If the child is positioned by the relative "Value" by an x amount, it would position itself according to the text above it and the parent itself. However, if you decide the child DIV would be better off outside the parent, obviously, the terms, "parent" and "child" would not apply, and thus the "ex-child" DIV would position itself only according to that "ex-parent" DIV but not the text. Hope that didn't confuse you.
    2. absolute is positioning the DIV at a fixed point in relation to the top-left corner of a live area or it's emcompassing parent, i.e. a table. So if my live area is say, 1200x1000px, and I position the DIV at exactly 600x500px (using the top: and left:, which we'll get to later), then the top-left corner of my DIV will begin exactly in the middle of the live area since it's half the distance of the that total area.
    3. static is a positioning that is pretty much like the absolute one except, the objects with this "Property" will act as if it's a normal part of a simple HTML document. If you nest a DIV, that DIV will inherit the positioning of it's parent DIV unless you throw in the static "Property". So, the object then appears in it's normal position as if you were to put it there normally and inflow with the rest of the document.

  • TOP: Is where the potential DIV along with all of it's content, will be in relation to the top most part(X axis=0) of the live area. So if you want the DIV to appear exactly 10px from the top of the live area, you would script it as such:
    top: 10px; or top: 10%;. Yes, you can use percentages. But becareful using percentages unless everything will use it as well. For example, if want an image to always appear right next to a certain text no matter what the screen resolution, if you use percentages on the image and not on the text, then you're going to have some problems. It's going to look messy on certain screen sizes.

  • LEFT: Is just like the "Value" above, except that it uses the left most part of the live area. The concepts are the same however.

  • WIDTH: Is the width of the potential DIV in either exact px or in %. But, when using positioning with the top & left "Properties", the width of the DIV would go out towards the opposite direction. For example, if you position a DIV with top: 0px; left: 0px;, and you want it to be 400px in width, the top/left portion of that DIV would sart from 0px by 0px and go out from there to the right and bottom. Width would be written as such:
    width: 400px; or width: 50%;

  • HEIGHT: Is just like the width "Property" except of course, it's regarding the height of a DIV. It follows the same general rules as the one above and would be written as such:
    height: 50px; or height: 50%;.

  • Z-INDEX: Is positioning the DIV in a 3-D dimension. Meaning, they can be stacked....hence the term "Layers". Now, from here on out, I will refer to DIVs as layers. Basically, when working with layers, you are creating more than one "page". Think of it as looking strait down on a book. You have a whole bunch of pages stacked on top of each other except, in our case, we have the option of seeing just the top page, or all the pages at once. Each layer is treated as an independant "document", the proper term would be, "object". Z-indexing starts with "0" and goes up from there. The "0" layer would be the bottom most(the deepest back in the screen) layer and each incremental number would make it a layer above it. So if you have 10 layers, the "0" would be the bottom layer and the "10" would be the top. Z-index would be written as such:
    z-index: 0; or z-index: 99;.

  • BACKGROUND-COLOR: Is the background color options for the background of a Layer. You can use either "hexidecimals" or proper names of the colors. With "hexidecimals", you don't need to use all 6 digits but instead, use 1 digit to represent each "RGB". For example, "#ff0000" would equate to "#f00". If you want no background color at all, then you would use the word, "tranparent;". So it is written as such:
    background-color: #00f; or background-color: blue; or background-color: transparent;

  • LAYER-BACKGROUND-COLOR: Is the same as above except, this "Property" is only used for Netscape-4. So, if you want to appease those users, it would be suggested to apply this along with the one above. Besides, it's good practice anyhow. I just wish Netscape and IE would just decide to go with all of W3C's standards rather than coming up with their own way of doing things.............arrrgh!

  • VISIBILITY: Is simply if you want a Layer to be visible or not. With this one in conjunction with javascript, you can create some really dynamic sites. Here's how they are written:
    • visibility: hidden;
    • visibility: visible;
    • visibility: hide; (for netscape 4)
    • visibility: show; (for netscap 4)
    • visibility: inherit; (inherits it's parent's visibility state)

  • OVERFLOW: Is if you want a Layer and its contents to be visible, hidden or auto IF, the contents exceeds the dimensions of the DIV.

    visible means that if you have a large amount of objects on a layer that will exceed the size of that layer, you're telling that layer to stretch vertically even overlap other objects or layers to try to show as much of that content as possible. The other thing is, sometimes, it can exceed the height of your live area so you end up not being able to see some of it since it will run off the screen with no scrollbars to see the rest of it.

    hidden is like visible, except even though you might have more objects than your layer can contain, that layer will retain it's dimensions even though some of your objects will be cut off from view. So what's left? If you have more content than a layer can contain, then you would use:

    auto, which ultimately makes use of a scroll bar. However, in some browsers, like "Opera" and in some cases "Netscape", it would also show a horizontal scrollbar even though it may not be needed. So, these, along with 2 others for Netscape-4, would be written as such:

    • overflow: hidden;
    • overflow: visible;
    • overflow: auto;
    • overflow: hide; (for netscape 4)
    • overflow: show; (for netscape 4)

So finally, if you were to put it all together, it would look something like this:

<div id="sample", align="left", style="position: absolute; top: 10px; left: 5px; width: 350px; height: 200px; z-index: 0; overflow: hidden; background-color: transparent; layer-background-color: transparent; visibility: visible; visibility: show;">
   Here would be my text or images

Notice every little space, colon, semi-colon, quote, comma and the equal sign are there for a reason. Well, the quote marks and commas are not needed unless you are making it XHTML compliant. Now, since you know some of the basic attributes, you should be able to take it from there to an extent. This concludes this lesson and until next time........practice makes perfect.
Copyright 2008 - 2022 All Rights Reserverd, Dream Designs.