Lesson 2: Cascading Style Sheets

Positioning

CSS provides three main techniques that allow you to position elements of your page with pin-point accuracy. Each of these techniques is rooted in the box model we discussed earlier, in the Overview of CSS section.

Since the div tag, like most other HTML tags, creates a box, designers typically place related items into div boxes, and then position these boxes wherever they wish on the page. Div boxes can be nested, and the nested boxes, in turn, can be positioned precisely within their containing box. The ability to control the position of element boxes is the basis for all page layouts in CSS.

Positioning is a fairly sophisticated topic in CSS, so I will only hint at the techniques that can be used to lay out your page design. Interested students should refer to a good CSS text for more information.

Simple Positioning

Browsers normally render HTML elements in the order they appear in the HTML file, placing them one after the other down a page. In HTML the only exception is an image element, which can be floated to the left or right margin of the page so that text can flow around it. Even in this default rendering format, CSS gives you some additional control over placement; as we discussed earlier, you can adjust the margins and/or padding of an element's box to shift its contents up or down, left or right within the space the browser allocates to it.

Floating and Clearing

You have probably noticed that the content area of these tutorials doesn't shrink or expand as you resize your browser's window. This is because I have placed all of the page content into a div box which is styled to have a width of 650 pixels. The ability to size boxes underlies a second technique for managing positioning; I can assign a box a small width, say 200 pixels, and then float it to the left or right margin of the page, just as we have all done with images in HTML. And just as with images, I can now specify that other page content (normally, text) is to flow around my box and resume normal positioning only after it has cleared the box's bottom margin. I can also float nested boxes -- they simply move toward the left or right border of their container; other content within their container can then flow around them.

A 2-column layout is a simple variation on this technique -- I float my 200 pixel wide box to, say, the left border of a page while simultaneously floating the next element in my layout to the right border. Both floated boxes will constrain the width of their contents, resulting in side-by-side columns!

Whenever elements are floated against a border, it's important to specify how the succeeding page content should be positioned. Often, we just want content to flow up alongside of the floated box, but in some cases we may wish to limit the amount of content that moves up; we do this with the clear property. By assigning:

clear: left;

to, say, a paragraph's style rules, we can force the browser to wait until the bottom margin of a box floated to the left has been cleared before rendering the paragraph.

The Positioning Property

The final property I wish to mention, the position property, allows the designer to actually remove elements from the normal flow of the document. I described the four values of this property previously, in the Overview of CSS section, and will now show you a simple example of absolute positioning that I have used throughout these tutorials.

Each of the callout boxes you have seen has the same basic HTML mark-up:

<div class="alert_box">
   <h4>box title</h4>
   <p>box content</p>
</div> 

I decided it would be interesting to move the h4 title upward until it was positioned over its containing div 's border. To do this, I needed to tell the browser two things: which box I wanted to use as a positioning context for my title (the default positioning context is the body tag, so I needed to tell the browser to use the "alert_box" div instead), and exactly how I wanted to position the h4 tag. In the code below, you can see that div.alert_box has a position property but no information on a new location to move it to. Here the position: relative; property is simply instructing the browser to use this div as the positioning context for its contents. The h4 tag, in turn, has properties to tell the browser both that it is to be positioned absolutely and where it should be positioned with respect to its positioning context (the div box). The value of -23 pixels forces the title to be displayed 23 pixels "before" the box it is defined in appears on the screen.

/* Callout Styles */
div.alert_box {
   position: relative;
   border: 3px double #f7e603;
   padding: 20px;
   margin-left: 35px;
   margin-right: 50px;
   margin-bottom: 20px;
}
div.alert_box h4 {
   position: absolute;
   top: -23px;
   background-color: #ffffff;
   font-variant: small-caps;
   padding:10px;
}
div.alert_box p {
   margin-bottom: 0px;
}

Since the h4 element has a solid white background, the border underneath it can no longer be seen.

This is just a very simple use of the positioning property; skilled designers can create extraordinary effects using CSS's positioning properties.