Figmint designs goodly designs for the average tasteful chap

Divs, IDs, Classes, and Positioning

Divs

You really can't get far with coding without divs. They're pretty much the most useful thing around, and a very, very necessary component of all pages. So what are they?

"Div" is short for page division. It's basically a section of a page. In your code, it looks something like this. 

<div>
Text, images and whatever you want go right here!
</div>
And when you upload that and check out what it looks like...well. It doesn't look like anything happened. xD

But wait! If you look at the code, your text, images and whatever you want are right inside a container now, which you can style and position, very easily.

Picture it. This container is a box. You can apply any properties you want to it, and position it wherever you like. You've suddenly gone from a very flat web page to one with sections. Look here and see this dream realized. That grey box in the center is nothing more than a div. It's so simple, but when you take it away, all the text and content flops over into the top left corner in a more than boring way. See here.

classes and ids

Chances are your web page is going to have more than one div. In that case, it's easiest to style a div after giving it a "name". If the div is going to be one of a kind, its name will be an "ID", and if the div is going to recur multiple times in a web page, it will be a "class". IDs are probably most common.

Below is the simplified code for a div ID with some styling. 
<style>
div#fancyid{
width:400px;
left:50px;
top:50px;
position:absolute;
}
</style>

<div id="fancyid">
Text, images and whatever you want go right here!
</div>
Have a look at that CSS. First you include the name of the kind of tag you're using the ID on--a div, and then a hashmark. The hashmark means id, as opposed to class. After the hashmark you put the name of the particular ID.
You can actually be ambiguous and drop the "div" before the hashmark altogether. I usually leave it off, as it's faster to type.
Classes and IDs work the same as any other kind of selector. The only thing to note is that the div won't appear unless you include the proper code in your HTML section. Notice that I edited the div tag to say <div id="fancyid">. I specified that the div was an id, instead of a class, and then called the name of the id from the css.

Classes work the same way, except you use a period instead of a hashmark, and, obviously, the word class instead of id. See here: 
<style>
.spiffy{
width:400px;
left:50px;
top:50px;
position:relative;
}
</style>

<div class="spiffy">
Text, images and whatever you want go right here!
</div>

<div class="spiffy">
Wow, even more text!
</div>
Notice a few things here. First, I dropped the word div in the css, as it was uncessary. Second, the spiffy class is used twice, since classes are meant for being used multiple times. Third, I changed position:absolute; to position:relative;. Since positioning is so important, let's have a good look at it.

positioning

In the first example, with the ID, I used position absolute. When I do this, my positioning values are used based on the top left corner of the web page. Therefore, when I said "left:50px;top:50px;", the left side of my div was placed 50px from the left, and the top side of my div was places 50px from the top of the page. Easy. Its the distance from the edge of the page with position:absolute;

Now what about position:relative;? In the second example, there are two divs. When you place one div after the other, without positioning, the second naturally falls below the first. However, when you tell both of them to be 50px from the top and 50px from the left, they end up on top of eachother!


By using position:relative; the positioning takes into account other divs, so they bump eachother out of the way.


A third type of positioning is position:fixed;. Whatever you position this way will remain in one spot on your screen, even when you scroll. This seems the least useful of the methods of positioning.

other imporant properties

Let's not forget about the obvious things. When you make a div, you can define its dimensions in pixels with the properties width and height. Top and left specify the distance between the top and left of the div and other page elements. Bottom and right can also be used, but that's pretty rare.

When you specify height, you've got to decide what happens when the content gets longer than the height allows. There's a handy property called overflow that gives you some options. The values for this property are auto, scroll, hidden, and visible.

With auto, a scrollbar will appear when the content gets too large. With scroll, there is a scrollbar even when the content fits within the div. Personally, scroll doesn't seem very useful. I always use auto.
Hidden means that any text that overflows from the box is hidden from view. It's just cut off. Visible is the opposite--the extra content just flows right on out of the box and sprawls all across the rest of your content, if you have a defined height. If you're going to use visible, I'd advise you don't specify a height. That way, the div will grow downwards to accomodate the content.

Here's a visual of the different scrolling options. Click for the full view. To see a live version, go here.

the broader scheme of things

We've been dealing with divs this entire time, but the truth is that IDs and classes can be applied to any part of a web page. For example, navigation links are often a class of link. That's how they all look the same. You can apply classes and IDs to paragraph tags, textarea tags, images, anything! Here's some code you can take a look at, to see how they're used in those cases. Experiment and have fun! 
<style>

a.nav{
color: #eeeeee;
background:#222222;
font-size: 20px;
font-family:georgia;
display:inline-block;
}

a.nav:hover{
text-decoration:none;
}

p#important{
font-weight:bold;
}

</style>

<a href="url1" class="nav">Home</a>
<a href="url2" class="nav">About</a>
<a href="url3" class="nav">Content</a>

<p id="important">
Hey, listen up, vistor.  I don't actually have anything important to say.
</p>
Anyhow, thanks for visiting.
[See this page live.]
Figmint © Frisby. Please enjoy and respect my work. Terms of Use.
eXTReMe Tracker