Absolute vs Relative Positioning

There are two ways you can position <div> boxes. First, there is "relative" positioning. This positions your box based on where it is included in the page's code. If the box is coded in a table cell, it shows up in that table cell. It makes your box work in an "inline" fashion, much like an <img>.

The second method of positioning <div> boxes is "absolute" positioning. This is where CSS positioning really gets its power. When absolute positioning is used, the browser doesn't care where the box's code is relative to the other objects on the page. It puts the box exactly where you tell it to be.

We'll be making this example in this tutorial. You can see from this simple example that CSS positioning is far more precise than tabular layout. It will eventually replace tabular layout.

You should be able to make and style the boxes. Below is the code for the styling of the red box:

#box1{
width: 100;
height: 100;
padding: 10px;
border: solid #000000 5px;
background-color: #ff0000;
color: #000000;
}

You should already know what this style rule does. We want to absolutely position this box on the page so we need to declare "position: absolute".

#box1{
position: absolute;
width: 100;
height: 100;
padding: 10px;
border: solid #000000 5px;
background-color: #ff0000;
color: #000000;
}

That's all there is to it. Now we can set coordinates to place that box anywhere we want on the page -- or even off of it.

Setting Pixel Coordinates

We place the box by determining where we want to place the top-left corner of the box. We use the "top:" and "right:" properties to do this.

#box1{
position: absolute;
top: 40px;
left: 100px;
width: 100;
height: 100;
padding: 10px;
border: solid #000000 5px;
background-color: #ff0000;
color: #000000;
}

This is what places the red box in our example 40 pixels down from the top of the screen, and 100 pixels to the right of the left edge of the screen.

The white box is positioned similarly by using:

top: 0px;
left: 300px;

Using "top: 0px" puts our white box right at the top of the screen. The "left: 300px" declaration moves the box 300 pixels to the right of the left edge of the screen.

Using Percentages & Negative Numbers

You don't have to use specific pixel coordinates. Both IE and Netscape support the use of percentage values for "top:" and "left:". This can come in really handy when you want your page to look proportionately the same despite the viewer's monitor's resolution.

The blue box in our example uses left: 50%; to place the left side of the box half way across the screen. Mind you, this isn't centering because it's the left side of the box that's being placed half way out.

You can center a box by using percentages to size its "width:" and position its "left:". Say we've got a box that's 20% of the screen wide with "left: 50%".

To "straddle" the 50% mark with the 20% box, we just divide the width by 2 which gives us 10%. Now we subtract this from the 50% center-line leaving us with 40%. Now just use "width: 20%" and "left: 40%". This will "pull" the box 10% to the left and center it.

The above takes a little figuring and practice. Remember that both the box's "width:" and "left:" must be percentage values to do this. You can align the center with any vertical or horizontal position on the screen using this method.

Negative numbers can be used to place your boxes partly or fully offscreen. A "left: -10" would put 10 pixels of your box off of the left edge of the screen. This is rarely needed, but you'll hear some "web gurus" saying you can't use negative numbers in "top:" or "left:". They're wrong. Negative coordinates work in both Netscape and IE.

Right & Bottom

Microsoft's Internet Explorer supports the use of "right:" and "bottom:" as well as "left:" and "top:". They work backwards from "left:" and "top:". If you use:

bottom: 0;
right: 0;

You'll get a box at the lower right corner of the page. Positive numbers move your box up and left, not down and right like with "left:" and "top:"

These properties can be very useful for positioning items to the right of a page, but Netscape doesn't support them. Rats. You might want to limit yourself to "top:" and "left:" for the time being.

Summary & Exercises

You can select a positioning method for your <div> boxes using "position: absolute;" or "position: relative;". Relative positioning makes your box work sort of like an inline image. Absolute positioning will put your box where you want it despite where the box is positioned in your code.

You position your boxes with "top:" and "left:". IE supports "right:" and "bottom:", but these are used less frequently. You can use percentages or pixels to position your boxes.

You can center a box if you use percentage values for its "width:" and "left:". Subtract half of the width's percentage from 50% and use the result as the percentage in "left:".

Now make our example and move the boxes around. Add two more boxes for a total of five. Try to line them all up horizontally. Practice centering a box until you get the gist of it.

To Next Advanced CSS Lesson

Back To Advanced CSS Index