EASY DIY Custom Blog Design Part 3: Wide 2 Column Template

This is a Series of Tutorials, so if you need to start at the beginning, CLICK HERE.

In this part of the tutorial, I am going to show you how to make a wide 2 column template with nice white space.  If you want to make a 3 column template instead, I have a tutorial HERE.

This tutorial uses the Minima Template (if you started at the beginning, I already had you do this).

First, you will need to head over to your Edit HTML page and scroll down to #header-wrapper { and change 660px to 1000px (or change it to what ever width you would like, in my example I am doing 1000px).

Next do the same thing on your #outer-wrapper {

Now I need to adjust the #main-wrapper {  I changed my width to 640px.

Then adjust the  #sidebar-wrapper {  I changed mine to 300px.

If you like your sidebar on the right, you can stop here, but if you would like to change it to the left, I will show you how to do that now.

Go to your #main-wrapper {  and change $startSide to $endside, and go to your #sidebar-wrapper {  and change $endSide to $startSide.  Now it should look like this!

Now Save your Template, and you are set!


  1. I tried moving the sidebar to the left, and somehow it ended up at the bottom of the left side. I tried to fix it and now it's on the bottom of the right side. Any helpful hints as to what might have happened?

  2. That happens when either your main-wrapper or your sidebar-wrapper are too wide for the width of the outer-wrapper, so you either need to make your outer-wrapper size larger, or make your main-wrapper and/or sidebar-wrapper smaller.

  3. I used the same measurements as you posted above. Could it have anything to do with not properly resizing my background before applying it? I think that is the only thing I have done differently so far.

  4. I did the same thing and am getting all the sidebar stuff at the bottom, too...even after making the outer-wrapper large and main-wrapper smaller.


Related Posts with Thumbnails