A Ruthsarian Layout

What's It All About

A momentary indulgence to put together a layout that operates from a single stylesheet, has a visually simple layout, and isn't too concerned with older browsers.

On Clearing

Floated elements will not be contained by their parent elements unless there is another element that clears all previously floated elements before the end of of the containing parent element. A simple approach to this is sticking an empty DIV element at the end of an element that contains floated child elements and give that DIV a clearing rule (clear:both).

The clearing element has been frowned upon because it requires extra markup in your web page and in a perfect world such superfluous markup would not be needed. To that end developers have come up with creative ways to not use a clearing element such as clearfix.

A newer approach to this problem has been to simply apply the rule overflow:auto or overflow:hidden to the container element. Modern browsers will then allow that element to grow to contain its children without the use of a clearing element.

These approaches have their downsides. For example the overflow rule will not work on this layout's horizontal menu because when the drop-downs appear they will either not appear at all (they are hidden overflow) or the entire box will expand to contain the newly appeared menu thus dropping the content of the page down in a rather disturbing manner.

Clearfix works, but to completely employ clearfix requires a couple dozen lines of CSS and embedded stylesheets to employ conditional comments for IE browsers. A few characters of superfluous markup was just traded for a few dozen lines of superfluous markup.

The advantage to a clearing element comes in its simplicity, clarity, and compatibility. One CSS rule is all that's needed to empower the clearing element to work in every browser that understands floats. The extra markup required is minimal and its purpose is easily understood to someone looking at a web page's source. The clearing element is a technique that has been in place since CSS was first introduced and it's a technique that should continue to be used today.

Space Consistency

Two margins placed next to each other in the layout of a web page will collapse into a single margin the size of the larger of the margins. If anything comes between the margins such as a border or padding then the margins will not collapse. Understanding this property of web page layout is vital in creating pages with consistent space between elements of the page. That consistency of space provides readers with a visual pattern to follow when they use the page. Differences in that pattern will stand out and may disrupt a reader's eye flow leading to a negative impression of the page.

To that end this layout incorporates "gutter" elements that line major content containers such as the columns, masthead, and footer. These gutter elements have only margin values applied with no padding or borders. These gutter elements set minimum amount of space between the edges of major containers and their content. Because margins collapse any content that contains margins (paragraphs, headings, etc.) will have its margins collapse with the gutter element rather than adding to the space. As long as that content works in margins rather than padding you can be sure that a consistent gap will exist around content and their containers

The Menu

The menu is a take-off of Ruthsarian Menus, but without all the hacks and javascript support to get it working in older versions of IE and Netscape. New to the menu is the use of CSS3 drop shadows and a different approach to the visual cues that indicate a menu will drop down.

The dropped shadow gives the menu a stronger visual presence; it puts the menu over the content in a stronger fashion than without the shadows. By using CSS3 rather than semi-transparent images there is no need for external images and it keeps the layout more simple.

The visual cues that a menu item expands comes in the form of a gray line along the edge in the direction the menu will drop. These gray bars are created with the child menu so that there's no need to add special case classes to menu items that have child menus. This makes life maintaining the menu a little easier.


Don't expect this layout to work in old browsers. The top menu will appear in IE6, but the drop down menus will not appear. Earlier version of IE haven't even been tested and you should assume they break this layout.