The symptom of float-based layouts

One of the side-effects of using floats for layout is that the element being floated is drawn out of the flow of the content, and the content flows around the floated container. Even though this is the idea behind floats, it’s not entirely ideal for layout.

One too-long floated element, and other components further down end up being flowed around the floated element until the floated-element has been passed, and then the full width of the parent element is available.

This means that components later on in the page typically need some styling to the effect of don’t start appearing until after the floated element has been passed. Typically, this is done with a clear CSS property.

Markup for presentation’s sake

Leaving the clearing up of previous floats to the preceding elements isn’t a wise move. It forces the content container to take into consideration the layout it’s placed in. And that introduces assumptions and conflicts into layouts. A content container that’s clearing and previous sibling floats cannot then appear next to a previous siblinb container. So placing two content containers side-by-side is impossible.

A technique that’s prevalent on the web today is the use of an empty div used for the purposes of clearing previous floats. That way the following containers of content don’t have to take into account floated elements in the flow before them. The structure of this technique looks something like this:

<div class="module">
	... internal elements, including a floated
	elements that may extend longer than the
	non-floated content
</div>

<div class="clearfix"></div>

<div class="module">
	... Next content containter, thanks to the
	previous div.clearfix doesn't need to
	worry about whether a floated element will
	interfere with it's own layout...
</div>

The .clearfix is normally styled with clear: left, or clear: both if the layout may contain elements floated rightwards too.

This makes sense in some way. The next element doesn’t need to deal with extended floating elements, and can assume that it’s been handled.

Downsides of solving presentational issues with markup

There are two main drawbacks to this markup-based approach:

• It’s additional markup that has nothing to do with the content on the page. Granted, additional containers are needed for non-trivial layouts, but this should be done grudgingly.
• Laying out the two modules side-by-side is now impossible. So the technique has sacrificed layout flexibility. This could now only be done by introducing extra markup.

Redelegating responsibility of clearing floats

And yet, neither sacrifice is necessary. The content container should clean up after itself, and take responsibility for it’s child elements.

Simply, the content containers should always clear any contained floats. We’ve previously discussed methods of self-clearing floats. Applying these techniques we can refactor the above code and removing the extraneous empty div, whose purpose is now properly handled by the content container:

<div class="module">
	... the div needs to take responsibility
	for it's child content...
</div>

<div class="module">
	... Next content containter isn't
	hindered by the previous content ...
</div>

And adding in the style rules to self-clear any contained floats:

.module {
	overflow: hidden;
}

Note: overflow: hidden is a stable way of clearing floats, but it does have a drawback of not allowing child content to overflow outside the container’s edges. For the majority of layout scenarios, this is a good thing. In the very few cases where this feature is not desirable, then use an alternative self-clearing method, like the content :after approach, plus an IE-tailored style to force hasLayout.

Self-sufficiency improves flexibility

Content containers that clean up after their child elements reduce the maintenance headache. The order of content on the page can be more flexible. And two blocks of content can be placed side-by-side, with space permitting.

Essentially, self-clearing wrappers become a solid foundation, and so allows more intricate styling by isolating the effects of floated elements just to that atomic unit of content.

Note: Using file size optimisation as a basis for a styleguide for writing CSS is the wrong way to go. Always favour readability and legibility of the code over the number of bytes across the wire. Use a CSS compressor right before the CSS file gets deployed to a production environment; that’s the right place to optimise file size.

Specifying all four values

Specifying all four values one after the other is the most common shorthand of all for margins and paddings:

margin: 20px 10px 15px 5px;

This style rule applied a top-margin of 20 pixels, a right margin of 10 pixels, a bottom margin of 15 pixels and a left margin of 5 pixels. The rule that each side is defined in a clock-wise order starting from the top; hence the sequence of: top, right, bottom, left

This is the worst case scenario. It suggest there is neither horizontal consistency nor vertical consistency of margins. Designs done without horizontal consistency are harder to visualise and debug than those that are consistent. Specifying all four values doesn’t imply any consistency.

Specifying just one value

Specifying one value is the second most common approach to setting margins and paddings:

margin: 5px;

This style rule sets all four sides (top, right, bottom, left) to 5 pixels. This leads us to our first implicit rule of shorthand usage: even when a particular side is not explicitly specified, it is always set to something in a short hand rule.

This shorthand is equivalent to margin: 5px 5px 5px 5px. This is the height of consistency; all margins are the same. The cognitive load for a site maintainer is the lowest when one value is specified. There is the implication that the design is both horizontally and vertically consistent; everything is perfectly balanced, and nothing is asymmetric.

Specifying one value makes it abundantly clear that all four values are being set, and the resulting code is less cluttered than specifying all four values. So this one is a maintenance benefit.

Specifying two values

The next common margin and padding shorthand is specifying two values:

margin: 10px 5px;

What this particular rule does is to set both the top and bottom margins to 10 pixels, and both the right and left margins to 5 pixels. Essentially, this is the same as margin: 10px 5px 10px 5px;. The values in the property are just duplicated, in the same order.

The two shorthand values implicitly suggest both vertical consistency and horizontal consistency. The resulting code is clear and less cluttered than specifying all four values, so again this is a maintenance plus. Flagging horizontal consistency and vertical consistency by using two values is another maintenance benefit – saying more with less code.

Specifying three values

Specifying three values is the least used of the shorthand methods. But surprisingly appreciated by many world-class web developers.

margin: 10px 5px 15px;

This style sets the top to 10 pixels, the right to 5 pixels, and the bottom to 15 pixels. That’s the easy part. What’s the left margin after this style rule?

The answer is that the left value takes on the same value as the right. So the equivalent 4 value rule is: margin: 10px 5px 15px 5px;. I found this particular shorthand method difficult to remember, because I didn’t understand the point behind this option. And so I never used it, preferring either to express all four values, or two, or one.

And the point behind three shorthand values is this:

Three value margin shorthands imply that there is horizontal consistency in the design. It means that the developer has coded the design in such a way that the left and right margins of each container are equal. Grid-based layouts are prime examples of where left and right margin consistency is essential, and the three value shorthand is a good indication that this approach has been used.

That’s the key to remember when you see three values in a margin and padding shorthand: The developer had build the page with consistent right and left margins. If you see four values in this type of layout, that means the consistency has been broken for a reason.

Due to the nature of a web page, horizontal consistency is more feasible and practical than vertical consistency. So the likelihood of left and right margins being equal is greater than the top and bottom margins being equal. It is in these situations where left and right are the same, but top and bottom are not that the three value margin shortcut is used.

It is a matter of taste whether you use the three shorthand values or not. I’ve tended to stay away from it, but I got caught out when it was used on a page created by someone else. But it’s worth knowing how it works and what extra meaning it implies.

Given an element with an id of wrapper, the styles needed to easy clear any contained floats is:

#wrapper:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#wrapper {
	zoom: 1;
}

The :after selector deals with most modern browsers, so Firefox, Safari, Opera (the ones listed as Grade A browsers in Yahoo!’s Graded Browser Support chart). Internet Explorer 6 and 7 ignore this rule, so the second stylerule, the zoom: 1 triggers hasLayout in IE6 and 7 which does the self-clearing of floats.

If valid CSS is an absolute and non-negotiable requirement, then zoom: 1 is going to be a problem. So instead you could replace the zoom:1 selector rule with another style-rule that triggers hasLayout in IE, like height: 0%, or overflow: hidden – pick your poison.