Design, CG Graphics & Inspiration
Columnar Layout

Columnar Layout

There are many methods of making columnar layout. More than one web developer’s nose was blooded (fortunately, only virtually) in the holy wars over the superiority of one or the other technique. It should seem that everything is as clear as possible by now, but plenty of difficulties still arise here and there. I’d like to make my contribution to the common good, so I’ve spent some time on experiments that allowed me to create one more method, which has the following advantages and disadvantages:

Advantages

  • There is a footer that sticks to the bottom
  • Menu columns are 100-percent vertically stretchable
  • The number of columns is virtually unlimited
  • The columns may be left-sided, right-sided, or combined (for example, you can have two columns on the right and one column on the left)
  • The columns can be either of fixed width or horizontally stretchable
  • Very few hacks are used
  • JavaScript isn’t used
  • No background images are used for creating column effect
  • No tables are involved
  • The result looks the same in IE5.5, IE6, IE7, IE8, Firefox 3.5, Opera 10, and Chrome 4. (If you find out that the layout is incompatible with some web browser, please tell me about that, and I’ll try to fix the problem.)

Disadvantages

  • There are a few “extra” blocks. (I’d be happy to get rid of them but cannot do that.)
  • There are a few absolutely positioned blocks.

Any constructive criticism is welcome! (I’ve been re-inventing wheels since I was a little boy, so if you know of a layout method like that described in my article please give me a proof link.) Any advice on improving my technique is welcome too — let’s improve it together! Maybe later I’ll make a layout generator like one developed by the guys of csstemplater.com — I’ve been using their amazing tool from time to time and highly recommend it! If my article is too voluminous for you, please scroll down and check out the links to some layouts created with this method. Well, let’s get down to business…

Step 1: Footer that sticks to the window bottom

In our field of business, a sticky footer is a very popular topic. What do we need to create this sticky effect?

  • First, we must set a 100% height both for html and for body.
  • We need at least three blocks: one block is for container to hold all elements; another block is the footer itself;
  • and the third block will hold the webpage content.

In our case, the layout will be something like that:

  <div class="wrapper">
    <div class="container">
      Content
    </div>
  </div>
   
  <div class="footer">
    Sticky footer
  </div>

Here’s the CSS for our layout:

html, body {
          min-height: 100% !important;
          min-height: auto;
          height: 100%;
          border: none;
        }
        
        body {
          margin: 0;
          padding: 0;
        }
        
        .wrapper {
          display: block;
          position: relative;
          min-height: 100%;
          height: auto !important;
          height: 100%;
          width: 100%;
          min-width: 800px;
          background: yellow;
        }
  .container {
          display: block;
          height: 1%;
          padding: 0 0 50px 0;
        }
  .footer {
          margin: -50px 0 0 0;
          height: 50px;
          background: #BFF08E;
          position: relative;
        }

I guess there’s no need for a long explanation as everything is pretty obvious. Just pay attention to the bottom padding of the .container block and to the negative top margin of the .footer block. We use the negative shift to raise the footer in order to fit it above the container. By moving the footer away, the content block’s padding prevents the content from going under the footer.

We also stretch the document body vertically, so it occupies 100% of the window height. Some properties, such as background, are optional.

Step 2: Thinking over next things to do

Then I usually create a page header within the .wrapper block.

.header {
    position: relative;
    width: 100%;
    height: 50px;
    background: cyan;
  }

Now it’s time to make columns of equal height. Having tried lots of options, I arrived at a conclusion that to create stretchy columns occupying 100 percent of the document height, it makes sense to use two blocks for creating each column: The first block has an absolute position, fixed width and a 100% height; the second block has a relative position and is laid over the first, absolutely positioned block.

Therefore, we need to add an absolutely positioned block to the .wrapper and a relatively positioned block to our container.

Here’s an example of my layout:

<div class="wrapper">
    <div class="column-l">
    </div>
    <div class="column-r">
    </div>
    <div class="column-m">
    </div>
    <div class="header">
      Header
    </div>
    <div class="container">
      <div class="column-l">
        Column 1
      </div>
      <div class="column-r">
        Column 2
      </div>
      <div class="content">
        Content
      </div>
      <div class="clear">
      </div>
    </div>
  </div>
  <div class="footer">
    Sticky footer
  </div>

Not to overfill the article with code samples, here’s a link to download all of them in one css file.

Final scene: Wanna have some real examples!

Check out some layouts created with my method:

All in all, you can use any combination you like. Please note that z-index works both for absolutely positioned blocks and for position:relative; blocks.

You can download all the examples in one Zip file (11 Kbytes).

Sorry if my writing style is somewhat muddled — still, I hope that my article might be useful for someone.

Thank you for reading it!

  • Sergey Chikuyonok,
  • January 19, 2010

SHARE THIS POST

Sergey Chikuyonok is a Russian front-end web-developer and writer with a big passion on optimization: from images and JavaScript effects to working process and time-savings on coding.

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.