Header

Left

The columns are divs with a class of saila-col. Each is absolutely positioned, and has a percentage-based width. The middle column, in this layout, is given a wider default width. The page’s overall width is constrained by a min- and max-width on the body. Optional styles for widths below 620px are included via a custom, width-based media query.

Middle

Advanced structural pseudo-class selectors are used (:nth-of-type) to simplify which column to make left, right, and middle.

The styles:

@media screen and (max-width: 620px) {
    body .saila-hdr,
    body .saila-col:nth-of-type(n) { /* removes the columns at narrow widths */
        position: static;
        width: auto;
        top: auto;
        }
    }

body {
    max-width: 75em; /* optional maximum width */
    margin: 0 auto;
    position: relative;
}

header { /* needed to trigger browser to recognize the element */
    display: block;
}

.saila-hdr,
.saila-col {
    position: absolute;
    width: 20%;
}

.saila-hdr {
    height: 120px;
    width: 100%;
}

.saila-col {
    top: 120px; /* height of .saila-hdr */
    margin-top: 10px; /* approximates a 1% top margin */
}

.saila-col:nth-of-type(2) { /* second and "middle" column */
    width: 58%; /* emulates a 1% right margin */
    left: 21%; /* emulates a 1% left margin */
}

.saila-col:nth-of-type(3) { /* third and "right" column */
    left: auto;
    right: 0;
}



Internet Explorer 7 and 8 Support

Place the following in the head of the template to enable IE 7 and 8 support:

<!--[if lte IE 8]>
<style>
    .saila-col + .saila-col {
        width: 58%;
        left: 21%;
    }

    .saila-col + .saila-col + .saila-col {
        left: auto;
        right: 0;
        width: 20%;
    }
</style>
<script type="text/javascript">
    document.createElement("header");
</script>
<![endif]-->

Right

The layout uses generic class names that are prefixed with “saila-” to prevent collisions with other styles. Classes are now used to keep the markup more semantic.