CSS-P Tutorial 04 -- The width Property

Michael Masumoto's Cosmic CSS-P Tutorial

Positioning Text: The width Property

You can position paragraphs of text in the same way that you position images, using a positioned DIV tag.

Example (abbreviated):

<div id="fred">
<p>Here is some text. It is not very exciting text, but it is long. Long, long text. It goes on and on and on. Why, look at all this text! I wonder if it will ever say anything interesting? No, I think not! But it sure is long!</p>

<p>Here is another paragraph of text. This one is short.</p>
</div>

Example (in context using an embedded style sheet):

<html>
<head>
<title>Example CSS-P Page</title>
<style type="text/css">
<!--
#fred {
    position:absolute;
    left:100px;
    top:30px;
}
//-->
</style>
</head>
<body>

Here is the above example displayed.

Notice how the text wraps to the edge of the browser window in the displayed example? If you want to control the width of the text column, you need to set the width property of the positioned DIV element, in addition to the position, left, and top properties.

Property: width
Values: any integer-based pixel value (100px, 250px, etc)
Description: The width property sets the width of a positioned element.
Example: width:250px;

Example (abbreviated):

#fred {
    position:absolute;
    left:100px;
    top:30px;
    width:250px;
}

Example (in context using an embedded style sheet):

<html>
<head>
<title>Example CSS-P Page</title>
<style type="text/css">
<!--
#fred {
    position:absolute;
    left:100px;
    top:30px;
    width:250px;
}
//-->
</style>
</head>
<body>

Here is the above example displayed.

You get the idea. To restrict the width of a positioned DIV which contains something like paragraphs of text, you will need to set the width property in the ID for the positioned DIV in the style sheet.

Main Menu