Adjusting Margins For Three Column Denim Templates

In the earlier related post, we showed you how to make a three column Denim layout. In this post, we will show you how to adjust margins and columns widths in your new three column Denim template.

One of the first things you may notice about your new three column Denim blog is that there is no margin on the left-hand side of the left sidebar. This is easy to fix, and we posted these instructions separately so you could gain confidence in adjusting margins and also column widths. This way, you can completely customize the look of your new three column layout to almost any desire completely on your own.

First, however, a word about pixels and screen width. In our three column tutorial, you widened the width of the main page from 720 pixels to 940 pixels. This was to make room for the third column. 940 is a safe width which will allow almost all users to easily view your blog pages on existing monitors (on another blog of mine, fewer than 5% of viewers use the old 800x600 screen resolution). We also used side-bar widths of 192 and a main column width of 500. In addition, there are also (4) 14px margins built in to the template, and in the three column tutorial we left those the way they were.

In this tutorial, we are going to move those margins around a little, and also explain how column widths and margins can be customized to your liking.

First, about that left-hand column margin: we should to fix it. Right now, your left sidebar code should look like this:

#left-sidebar-wrapper {
margin-$endSide: 14px;
width: 192px;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

The second line shows the margin settings, which call for 14 pixels on the "end side" or right hand side of the left sidebar. Since the margin settings on the main column already have 14 pixels on the left hand side, this means we now have a 28 pixel margin between the left sidebar and the main column. These doubled up margins are what makes the columns look unbalanced. Consequently, we should change the sidebar margin so that the 14 pixels are on the left-hand side, or start side, of the sidebar instead of the right side. That's easy. Just change "$endside" to "$startside", like this (remember to edit carefully; there is an "s" in $startside):

#left-sidebar-wrapper {
margin-$endSide: 14px;<-------change $endSide to $startside
width: 192px;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Hit preview, and if everything looks good, save the changes and republish. You should now have equal 14 pixel margins on the left and right hand edges of your blog, and equal 14 pixel margins in between the main column and the left and right sidebars. Everything is now balanced.

If you want to changes the widths of your columns, that's easy too, but you must keep in mind that the the column widths plus all the margins must all add up to your main page width. Right now, your main page width is 940 pixels, into which you fit one main column that is 500 pixels wide, two sidebars that are 192 pixels wide each, and fours margins that are collectively 56 pixels wide (4x14). Not coincidentally, the three columns and all the margins also add up to 940 (500+192+192+56=940).

Accordingly, you must maintain this relationship if you adjust your column widths. For example, if you want to increase the width of your two sidebars by 8 pixels each, you'll need to increase the width of your main page by 16 (2x8) pixels, such that the new main page width is 956. Conversely, you could also reduce all the margins by 4 pixels each, such that they are all 10 pixels apiece instead of 14, and the overall page width can remain at 940 pixels.

The possibilities for customization are almost endless, so long as all your columns and margins do not exceed the main page width. If they do, the right hand column will usually drop down to the bottom of the page. If you decide to increase your main page width to accommodate larger columns, be careful not to increase it too much. Anything larger than 1028 pixels will cause trouble for viewers with older monitors (which have smaller screen resolutions). They will have to scroll left and right, back and forth, to read the content of your blog, and that will reduce readability.

I hope this tutorial on adjusting your three column Denim margins was helpful. Most of all, I hope you enjoy your slick new three column Denim layout!