In this second part of my informal series of articles about Cascading Style Sheets for coders, I will cover probably the most frustrating thing with regards to CSS that most of us come up against, which is page layout.

Note I am writing and updating this at the moment. It is incomplete, but will remove this message when done.

Many websites and in particular blogs have multi column layouts. If you google multi column layouts you will find many recipes that are easy to include in your web application. Before I always found one of these and used it to layout my pages. However I was almost never happy. Why?

• If I resized the page, things wouldn’t always look right. Boxes would move around in strange positions or would overlap.
• The real content of the page such as the blog article would in most cases come at the end of the page if viewed in a non css browser such as lynx or mobile browsers.
• Adjusting these to my own layouts where always trial and error. Nothing just worked.
• It all seemed like a giant hack

Float and it’s problems

The problem that causes this is that the majority of css multicolumn layouts rely on the css float property to do its magic.

It turns out that this is a big conceptual error. Read what the above CSS1 standard says about float:

Using the ‘float’ property, an element can be declared to be outside the normal flow of elements and is then formatted as a block-level element. For example, by setting the ‘float’ property of an image to ‘left’, the image is moved to the left until the margin, padding or border of another block-level element is reached. The normal flow will wrap around on the right side. The margins, borders and padding of the element itself will be honored, and the margins never collapse with the margins of adjacent elements.

In otherwords it is designed for images and other elements that you want to float to the left or right of some content. It has a ton of rules to use and it is normal to experience the annoying collapsing side effects, because you essentially hand over control to the browser about what to do when the browser resizes.

The source of the css is:

.head {
     font-size:1.2em;
}
.content {
    float:left;
    width:60%;
   background:#FFE;
}
.rightcol {
   background:#EEF;
   margin: 2px;
   float:right;
   width:35%;
}

And the html:

<h1 class="head">Headline</h1>
<div class="content">
Lorem ipsum dolor sit amet...
</div>
<div class="rightcol">
<ul>
<li>We like to link</li>
<li>We like to link</li>
.....
</ul>
</div>

This can become very flaky when using it with resizable pages and is generally a pain to debug. One of the worst things as well is that there is much trial and error in making it look good. However as all the browsers are different, it again is almost impossible to get right.

When to use float

Float is very powerful, but not for multicolumn layouts. You should use float for example for wrapping text around an image. Also use it in controlled areas where a bunch of similar items need to be layed out automagically. For example most CSS list based navigation bars and in my own SoapBX where I automatically flow the presentation previews. Try resizing the browser on that screen or resizing it.

Absolute positioning to the rescue

Absolute positioning is just about the coolest and most obvious feature of CSS that you hardly ever hear about.. With this you can control exactly where you want things on a page.

The thing about absolute positioning is that it isn’t quite as absolute as you might think, but that is actually a good thing. You might think absolute positioning would give you an xy grid for positioning, which it does. However it positions things relative to a box (by default the page). So you can position things 200 pixels to the left of the right side of the page Thus if you want a column at the right side of the page you could create a class like this:

.content {
   position:absolute;
   top:25px;
   left:0px;
   right:204px;
   background:#FFE;
}
.rightcol {
   position:absolute;
   top:25px;
   right:0px;
   width:196px;
}

As you can see the positioning is a lot crisper and can still handle various kinds of dynamic sizing.

Still todo add section about relative positioning and proof read

I have created a presentation over on my latest project SoapBX following up on my ideas for micro ventures. Have a look your self Six simple rules for Micro Ventures

Having finally groked most of the philosophy and finer points of CSS based layouts developing the layouts for SoapBX, I thought I’d start writing some of the things I’ve learnt down before I forget it and in case it would be of use to other developers out there.

This first part I want to highlight how css actually was designed to allow object oriented design and how you should think about your design.

Objects

First time you look at a complex style sheet it tends to look really complex and ugly. However the advantage is that your html should look a lot simpler.

Objects and classes in css are actually a lot more like ruby’s implementation than Java’s, in that you can extend your class directly within an instant. Don’t worry to much about that for now.

Objects are basically tags within your html page. You can think of most of the built in tags as java’s primitive type or the built in classes.

So <h1/> is an object of type “headline1” and <p/> is an object of type “paragraph”.

Some of the built in types are more complex, such as the list constructs and forms.

You use the <div/> tag for objects using your user defined classes in html.

Instantiating your object

Lets say we have an object in our application that we need to display called product. We instantiate our object like this:

<div class="product">
     <h1>Geek</h1>
      <img src="http://talk.org/images/face.jpg"/>
      <div class="price">$100.00</div>
</div>

What did we actually do here? Well we said this object is an instance of class Product. Just like in dynamic languages like ruby, perl and python we just started adding instance variables:

• A title
• An image
• A price

The beauty of this is that this would work just fine without any further work. You can start developing your application and not worry to much about the final look. However to format this we need to create our style sheet. It just uses the browsers default version of the tags which will just about always be readable if not necessarily exciting.

This is more or less how it would look:

Geek

$100.00

Defining our class

Firstly you need to create a css file. You probably already know how to do this. This is just a plain ascii file that you give a .css extension. Lets call ours catalog.css. To use it in your page you use the html equivalent of Java’s import and Ruby’s require, the link tag:

<html>
<head>
<title>StrangeStuff.com</title>
<link href="/stylesheets/catalog.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body> ....

This shows the inclusion of the style sheet, which should normally be in the head block of your html file. As webdevelopers we normally have some kind of 3rd party or homebrew template system such as SiteMesh or Ruby on Rails Layouts . Place this in your normal template and it is included in all your pages.

Now within your css file you start defining your class:

.product{
      border: 1px solid black;
      padding: 2px;      
      width: 200px;
}
.product h1 {
      font-size:18px;
      font-weight:bold;
      color:green;
      border-bottom: 1px solid green;
}
.product .price {
      font-size:24px;
      color:red;
      font-weight:bold;
      text-align:right;
}

This now looks like:

Geek

$100.00

Now what have done here? First of all we have said that the product objects should have a one pixel line all round it (a Box basically) and a 2 pixel internal padding between the border and the content.

Then we say that any h1 tags within our product should be 18 pixels tall, bold and have a green line beneath it.

Finally we declared our own embedded object “price” to be inside our product and we say that it should be red, 24 pixels tall, bold and right aligned. We declared this as any object of class price inside an object of class product. We could also have declared this as a global definition for price like this:

.price {
      font-size:24px;
      color:red;
      font-weight:bold;
      text-align:right;
}

Which in our simple example would have given the same effect. However it is good to encapsulate as price is something so general that you might use it in many varying contexts.

CSS Selectors the key to our class definitions

You can see that the above style sheets are defined like this:

.CLASSNAME {
      PROPERTY NAME : VALUE ;
}

The classname part is actually just one type of what css calls selectors. For now we will just deal with classes and tags which is what we have used here.

Class selector

The following is a simple class selector, which says the object of class product has the following properties:

.product {
    bla bla bla ....
}

This would ofcourse match all objects defined like:

<div class="product">Hello</div>

It would also match:

<h1 class="product">Hello</h1>

To only match the div you would do:

div.product {
    bla bla bla ....
}

Embedded objects

Our product example has the following to rules:

.product h1 {
....
}
.product .price {
....
}

This is an example of an embedded or nested selector. I like to think of it as defining the instance variables of our class, but it is a lot more flexible than that.

The first selector says any h1 elements inside the product object should have these properties.

The second selector says any price objects inside the product object should have these properties.

Conclusion

This was just a simple introduction, but I do my best to keep this going with articles about:

• How to create flowing layouts
• When to use and not to use the flow property.