Introduction

The positioning CSS Layout method uses the position CSS property to absolutely position block level or inline elements. Positioned elements are removed from the normal flow of the browser. Consequently, there are great possibilities of overlaps between elements. Using this method, you can create any type of layout – fixed, fluid, elastic or even hybrid layout. The key defining factor in this technique is absolute and relative positioning of elements.

First Thoughts

To illustrate how this technique works, we shall show how to create a simple three column fixed layout using CSS. Its a layout that fits exactly the height of the browser window, which is typical of single page web applications. The layout we are to create is shown below.

A few things to note; in the professional world, the header, left, middle, right column and the footer contain real content not included in this template. Our aim here is to capture the general ideas of creating the layout. For example, the left column may have a navigation menu to allow easy navigation for the content in the middle column and the right column may act as a sidebar containing all sorts of relevant links or even adverts.

The layout is a fixed one, using pixels as the unit of measurement. The layout targets devices of screen size, 960px and higher. This means that such users will have the best experience when using this layout. Designing this template begins with a fresh html5 template page having various elements containing content to be positioned and layed out using CSS. The page may be generated by a server script or manually created. This is the html template.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Positioning Layout Template</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="positioning-layout.css">
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                <h1>CSS Template using Positioning</h1>
            </div>

            <div class="main">
                <div id="left" class="column left"><h2>Left Column</h2></div>
                <div id="middle" class="column middle"><h2>Middle Column</h2></div>
                <div id="right" class="column right"><h2>Right Column</h2></div>
            </div>

            <div class="footer">
                <h2>Footer</h2>
            </div>
        </div>
    </body>
</html>

Layout Code

The code to create this layout basically uses absolute positioning to center the .wrapper div relative to the browser window, and positions the columns relative to their container, .main.

* { box-sizing: border-box; }

body { font-family: Arial, Helvetica, sans-serif; }

/* ========= STYLES FOR THE MAIN CONTENT WRAPPER ==================================*/
.wrapper {
    position: absolute;
    left: calc(50% - 480px);
    top: 10px;
    bottom: 10px;
    width: 10px;
}

/* =========== STYLES FOR THE HEADER CONTENT ================== */

.header {
    width: 960px;
    height: calc(0.25 * 623px);
    padding: 30px;    
    background-color: blue;
    color: white;
    text-align: center;
    font-size: 1.2em;
}

/* =========== STYLES FOR THE MAIN CONTENT IN COLUMNS ================== */

.main {
    position: relative;
    height: calc(0.6 * 623px);
    background-color: whitesmoke;
}
#left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 240px;
    background-color: whitesmoke;
    text-align: center;
}
#middle {
    position: absolute;
    left: 240px;
    top: 0;
    bottom: 0;
    width: 480px;
    background-color: skyblue;
    text-align: center;
}
#right {
    position: absolute;
    left: 720px;
    top: 0;
    bottom: 0;
    width: 240px;
    background-color: whitesmoke;
    text-align: center;
}

/* ================ STYLES FOR THE FOOTER CONTENT ==============*/
.footer {
    height: calc(0.15 * 623px);
    padding: 10px;
    background-color: blueviolet;
    color: white;
    text-align: center;
}

Styles for the main wrapper container

We begin by setting the box-sizing property of all elements on the page using *. This is set to border-box changing it from the default which is content-box. Ultimately, this makes our width and height calculations easier since the set dimensions for elements already take account of padding and borders. In other words, the set width includes both padding and border lengths, though excludes margins.

So, to center the main content wrapper horizontally, we give it a width of 960px and then set its distance from the left of the browser to (50% – 480px). How does this come about you ask? Lets look at it this way. If you move the .wrapper horizontally, half way from the left ( = 50% of the browser width) and then move it backwards (minus) half the wrapper’s length (960px / 2 = 480px), the result is that the .wrapper will be centered horizontally.

* { box-sizing: border-box; }

body { font-family: Arial, Helvetica, sans-serif; }

/* ========== STYLES FOR THE MAIN CONTENT WRAPPER ========================== */
.wrapper {
    position: absolute;
    left: calc(50% - 480px);
    top: 10px;
    bottom: 10px;
    width: 960px;
}

This trick can be used to center any element either horizontally or vertically in any container, using absolute positioning. The 10px for top and bottom attributes basically make the container stretched vertically by anchoring it to the top and bottom of the browser window. This results into a parent container of height, 623px. The container height fits exactly in the browser window, without scroll bars which is typical of single page web applications.

Styles for the header and column container

The .header width is set to 960px to span the whole width of its container and its height to 25%, that of its container. The percentage heights applied on a child element only work, if their containing parent has a set height.

In order to position the columns, the column container, .main will act as the reference block by which the #left, #middle, and #right columns will be absolutely positioned. This simply means that the columns are positioned relative to .main. This is necessary to avoid unnecessary overlaps between the elements in the layout.

/* =========== STYLES FOR THE HEADER CONTENT IN COLUMNS ================== */

.header {
    background-color: blue;
    padding: 30px;
    text-align: center;
    font-size: 1.2em;
    color: white;
    width: 960px;
    height: calc(0.25 * 623px);
}

/* =========== STYLES FOR THE MAIN CONTENT IN COLUMNS ================== */

.main {
    position: relative;
    height: calc(0.6 * 623px);
    background-color: whitesmoke;
}

The column container, .main is set to a height of 60% its parent container, .wrapper. This will make the heights of all the child columns also 60%, that of their parent;

Styles for the columns and footer

All the columns must add up to 960px for an exact fit. The #left and #right columns are the same and will be set to 240px each. Since the #middle column is intended to hold the main content, it has to be wider and so is set to 480px. Thus, this results to 960px (240px + 480px +  240px). You can change the widths of these columns depending on what you like but just make sure the middle column is the widest and that the total length of the columns is 960px.

The width of the footer, .footer is set to 960px and height set to 15% of its parent. This simply means that the total height (100%, 623px) of .wrapper is shared among its children, .header (25% =155.75px ), .main (60%=373.8px) and .footer (15%=93.45px).

#left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 240px;
    text-align: center;
    background-color: whitesmoke;
}
#middle {
    position: absolute;
    left: 240px;
    top: 0;
    bottom: 0;
    width: 480px;
    text-align: center;
    background-color: skyblue;
}
#right {
    position: absolute;
    left: 720px;
    top: 0;
    bottom: 0;
    width: 240px;
    text-align: center;
    background-color: whitesmoke;
}
.footer {
    background-color: blueviolet;
    color: white;
    height: calc(0.15 * 623px);
    text-align: center;
    padding: 10px;
}

Note that the footer isn’t absolutely positioned, to prevent overlaps. In other words, it remains in the normal flow of the page. The calc() function was used extensively in this tutorial but it does basic math calculations when specifying property values . It accepts these addition (+), subtraction (-), multiplication (*) and division (/) operators, anywhere an angle, length, frequency, time, percentage, number or integer is allowed.