HTML & CSS Tutorial: DIV Positioning [absolute and relative positioning]

You can use divs to accomplish a wide variety of positioning options for your text and images. You can code entire layouts in divs, and they come in very handy if you don't want to use tables. Divs can allow you to put your content anywhere on your page. An example would look like this:

<div style="position: absolute; top: 260px; right: 10px; width: 50px;"> Position Absolute Div Tag </div>

Position Absolute Div Tag

See the text 260 pixels down from the top of your browser screen, 10 pixels from the right, and with a space 50 pixels in width?

Now you can change position: absolute to position: relative if you don't want the position according to the person's browser/screen but in accordance with everything else on the page. For example, I can write this:

<div style="position: relative; top: 0px; left: 100px;"> Position Relative Div Tag </div>

Which would produce this:

Position Relative Div Tag

You can also exclude the whole position: relative line and use margin-top and margin-left instead of top and left to achieve the same effect. Note how the text is not at the very top of your screen even though it says top: 0px. It's only relative to what you already have and your allocated text space.

For both of the above examples, you can use top, left, bottom, and right as positioning attributes. (Or margin-top, margin-left, etc.) That's your basic on div positioning!

Tutorials

Design

Quizzes

Interactive

HTML & CSS Tutorial: DIV Positioning [absolute and relative positioning]

Forum

Site

Site of the Month

Affiliates