CSS Positioning

d8uv · 03-22-2003, 04:13 AM

One of the hardest things to figure out in CSS is how to position things on the screen. Normally, people do this by using <table> hacks, but these are actually hazardous to your health. I'm bald right now, because of all the hair-pulling episodes I've had trying to update sites using this ugly technique.
Believe it or not, CSS positioning is not a black art. Once you have the hang of it, you'll realize that it is a whole lot easier than table hacks. Instead of keeping constant track of what <tr> tag I'm on and what width the <td> tag... so on and so forth, I just write two rules, using the clear language of CSS.

The only downside to this is that a lot of browsers are ignorant to CSS. Even less are hip to the positioning side of things. Don't let that get you down, however, there are ways to cleverly manuver around such bugs.

Also note that you can only position so called "block" display types. This basically means that you can position things like <div>, <p>, and <blockquote>. Anything that formats a block of text, really. Note that this does not include "inline" display types such as <a>, <b>, and <font>.

The Position Property
In order to position things, we first must tell the browser how to position such things. So, here's a nifty list of possible values.

absolute - This value lets you position the thing wherever you want (relative to the thing's parent element)
fixed - Just like absolute, only with the addition that it stays fixed to the location that you set. Sadly, many browsers don't support this. So, we're forced to ignore this.
relative - This value lets you position the thing wherever you want it to be relative to where it would normally be.
static - Returns the thing you are positioning to how it would normally be. Since this pretty much cancels out positioning, we can effectively ignore this.

Code:

p { position: absolute; }

Moving the things
Now the browser knows how to position the thing, now it has to position it. Here's where you specify these attributes:

top - Where the top of the thing should be.
left - Where the left side of the thing should be.
width - How wide the thing should be.
height - How tall the thing should be.

Code:

p { position: absolute; top: 100px; left: 150px; width: 300px; height: 500px; }