Tutorial 18: CSS Positioning, Part I - HTML with Style | 4

Tutorial 18: CSS Positioning, Part I

Putting it all together

The most common use of absolute positioning is to create a columnar layout for your pages. Say, for instance, that you wish to get a block of text to appear to the right of your main text. You have to have a document that looks like this:

<P>This is normal text.</P>
<DIV ID="columns">
<P>This is some text. This is 
some text. This is some text. This is some text. 
This is some text. This is some text. This is some
text. This is some text. This is some text. This 
is some text. This is some text. This is some text. 
This is some text. This is some text. This is some 
text. This is some text. This is some text. This is
some text. This is some text. This is some text. 
This is some text. This is some text. This is some 
text. This is some text. This is some text. This is 
some text. This is some text. This is some text. 
This is some text. This is some text. This is some 
text. This is some text. This is some text. </P>
<DIV ID="right">
 <P>This text will appear to the right 
   of the rest of the text.</P>
</DIV>
<P>This is some text. This is 
some text. This is some text. This is some text. 
This is some text. This is some text. This is some
text. This is some text. This is some text. This 
is some text. This is some text. This is some text. 
This is some text. This is some text. This is some 
text. This is some text. This is some text. This is
some text. This is some text. This is some text. 
This is some text. This is some text. This is some 
text. This is some text. This is some text. This is 
some text. This is some text. This is some text. 
This is some text. This is some text. This is some 
text. This is some text. This is some text. </P>
</DIV>
<P>This is more normal text.</P>

To achieve the columnar layout, we will apply the following style sheet to the document:

#columns {
 position: relative;
 top: 0;
 right: 0;
 padding-right: 10em;
}
#right {
 position: absolute;
 top: 0;
 right: 0;
 width: 9em;
}

Let's go through these rules one by one: First, we set the positioning of the container (the DIV element with ID of columns) to relative. This will make our positioned box (the P element with ID of right) use the container as a reference for its position. We also give it a right padding of 10 ems to make room for our box. Notice that we use padding, not margin; since, as you remember, the width of an element is inside its margins, and contains the padding. If we set the right margin to 10em, then 10 ems of margin will be to the right of the main text and our positioned box.

Now that we've made space for our box, we can place it. We set the position property to absolute, placing it at the top right edge of its container, and set its width to 9 ems. The end result should look like this:

A box positioned to the right of the main document flow.

https://www.internet.com/

Legal Notices.

URL: https://www.webreference.com/html/tutorial18/3.html

Produced by Stephanos Piperoglou
Created: February 15, 2000
Revised: February 16, 2000