Lesson 2 - CSS-P

welcome to Dreamweaver

Positioning

CSS-P is an extension of CSS that manages the positioning of content. In the past tables were used for defining the layout but that was cumbersome because it often required nested tables which ended up creating lots of tags making it easy to get lost in them. Tables are great for displaying tables of information and should be used for that.

When a browser renders a page normally each tag is positioned in the order that it is read, from top to bottom. To alter this order the position property may be set. There are four possible values:

Absolute: The tag is placed at an absolute location regardless of where it is on the page. Note that if the tag is in a container, like a <div>, the absolute location is relative to the container.
Relative: The tag is placed relative to its position in the html.
Static: The tag follows the normal top-down flow of HTML. This is the default behavior.
Fixed: The tag is fixed to a specific position and when the page is scrolled the tag stays in that position and does not move.

Float and Clear

Tags that do not have their position property set to absolute, relative, or fixed may use the float and clear properties to control their positions. The float property functions like the align attribute of the image tag and allows relative positioning of a block element. Float sets which side other elements, such as text, divs, tables and so on, will float around an element. The float property is supported by both browsers and in this section I will show you how to assign the float property to a <div> tag that will contains an image. We will need to accomplish two tasks -- create a CSS Style that specifies how other objects will float around our <div> tag, and then assign that style to our <div> tag. A <div> tag is a container that defines a division/section in a page where elements may be grouped. When a style is applied to the <div> tag the grouped elements will inherit them thereby removing the need to apply the styles to each element.

"The basics necessary to mark off a column of text 150 pixels wide to float to the right of its parent element (by default to the full-page <body> element) would be to create a CSS class - <style> .rightcolumn {float:right; width:100px} </style> - and then apply it to any arbitrary block of content - <div class="rightcolumn">. column text . </div>." - Tom Arah in The Future of Web Layout

Start by creating a <div> tag and creating and ID as imgDiv.

Create Div from Menu

Div Id

Click on New CSS Style to create a new rule.

If you click OK to save or have already created the <div> tag then to bring up the select the <div> tag and right click to bring up the new CSS rule popup: right click>CSS Styles>New...

creating a style for a div tag

The New CSS Rules popup will come up. If the Advanced button is not selected then select it. The <div> tag ID will be in the Selector drop-down menu. Make sure to define it in this document only.

New CSS Rule for Div tag

After clicking OK, the CSS Rule definition for #imgDiv will come up. Select Box from the Category column and click on the Float option menu and select right. Fill in some of the other options for Width, Height, Padding and Margin.

CSS Style definition window for imgDiv

Click OK, and look at your CSS Styles panel -- you will see the poperties you just selected in the Properties window. Remember, these properties can be edited right in the Properties window. View your document and then change some of the properties to see a live update.

CSS Panel for Div tag

You can always use the Tag Selector at the bottom left of the Document Window's Status Bar to select a <div> tag.

After the <div> tag has its properties set a <p> tag is added and will fill in the area to the left of the <div> tag. I added another <div> tag to contain the floated <div> tag and the <p> tag and set its width property to 300 pixels just to demonstrate how the paragraph fills in the area to the left of the <div> tag.

HTML of Float

Next, I am going to add another paragraph but this time I am going to set its clear property so that it will not flow next to the left of the floated image. I will select the both option. The same procedure is followed that was used to create the float. Instead of filling in the float property the clear property is filled in and set to both.

Clear property set to Both

The second paragraph has its clear property set to both so it will appear below the image. If any tags were floated to the left or the right then the tag that has clear set to both will not appear until both the left and right sides are clear of the floated tags.

Both: Tag appears when both its left and right sides are clear of the floated tags.
None: Tag flows around tags set to float. This is the default.
Left: Tag appears when the left side is clear of the floated tag.
Right: Tag appears when the right side is clear of the floated tag.

HTML of clear both

References and Resources

Dreamweaver CS3 The MIssing Manual by David Sawyer McFarland. For more on float visit the tutorial.

Visit w3schools for a tutorial on CSS positioning.

For a more detailed description of positioning revisit the CSS lesson on Positioning.