A CSS Walkthrough, part 4

In the previous part of this walkthrough, I added styling to the content of my page.

Simple Columns

Now I would like to make columns by placing the "sections" of my content side-by-side. I will do this with the "float" technique.

When you float a block element, it is pulled out of the document "flow" and forced to one side as far as possible. Floating also causes that element to "contract" to the width of its content; if it contains a lot of text, it will most likely be as wide as the page. If you apply a width to that element, you can put another element next to it.

I will apply "float:left;" to the div with id "pageContent" that holds the main content of my page as well as the ul with id "pictures" which holds the column of polaroids. Because the main div has a width of 735 px, a wide browser window will have enough extra space to the right of it to fit the pictures. The pictures are all a little more than 140 pixels wide, so floating the list that holds them will cause it to shrink to about 150 pixels in width, because floats like to "shrink-wrap" to the size of their contents. The relevant CSS is:

#pageContent {
  width:735px;  
  float:left; 
}

ul#pictures { 
  float:left;
  margin-left:20px;  
}
		

You will notice that I added "margin-left:20px;" to the list of pictures. I did this to give a gutter space between it and the div "pageContent," since without it they would be right against each other.

Clearing the Float

One more thing I have added to my CSS is a clearing element. Towards the bottom is a br tag with class "clear." The relevant CSS for this class is:

.clear { clear:left; }
		

clear:left means "clear any element that is floated left which appears above this element in the source." Alternatively, you could use right, both, or none, none being the default. This ensures that elements from here on will always appear below these floated elements, and not beside them. It also ensures that the containing element (in this case, the body) will stretch to contain the floated elements, which is very important if you have a background that needs to fill the entire area.

The CSS including both of these techniques is located in step5.css and can be viewed at step2-2.html.

In the next part, I will show how to apply custom styles to the links. Move on to part 5.