3-columns, with a twist (3 posts)

  1. nicolelee
    Posted 11 years ago #

    I want a 3-column layout, but instead of having the content in the middle, i want the content on the far-left. So as you can see on my blog, I want the two existing columns to be the same. I just want to add an additional column to the right (you can see my failed attempt with the "test" text at the bottom of the right column).

    The CSS code for the #content and the #menu currently, are:

    #content {

    float: left;

    width: 500px;

    margin: 0;

    padding: 20px;

    background: #ffffff;


    #menu {

    width: 180px;

    margin: 0 auto 0 540px;

    padding: 10px;

    background: #e7fbc8;

    text-align: left;


    I'd like the right-most menu to be #menu-right. I tried just copying and pasting the #menu code and adjusting the left-margin to 740 px, but that didn't work -- as you can see, what happens is that the right-most menu is just pushed to the bottom.

    Any suggestions on how to tweak the CSS?

  2. nicolelee
    Posted 11 years ago #

    I managed to fix this. I found an excellent tutorial on how to handle this on this site:


    The important things to note are the box-wrap and column-float codes.

  3. Yngwin
    Posted 11 years ago #

    That's turned out nice! This inspires me. I think I'll make a 1.5 theme based on this idea.

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.