Changing widths of blog - sidebars, main column

I have previously showed how to determine main column and sidebar widths. A blogger asked how to change the widths. It is not difficult, but before I show how to change the widths, let me explain something about web designs. If you are only interested to find out how to change widths, skip to Change Width

Webmasters always take into considerations the kind of visitors to their websites. One important considerations is the screen resolutions of their visitors and previously, small screen resolutions of 800x600. This is so that such small screen visitors will see the whole blog without having to use the horizontal scroll bar. Visitors with larger wider screen will see so called "wasted space". Even Vprofessional webmasters for big websites like CNN.com have this "wasted space". The so called "wasted space" are there for a reason, that is, to make things convenient for small screen visitors. You would not want to make it inconvenient for small screen visitors and discourage them from coming back to your blog.

Now we come to the part about changing width:

---

Change Width
The widths of the whole content, the Header, the Footer, the main column and the sidebar or sidebars are controlled via the CSS (Cascading Style Sheet) of the template. The sections involved in the case of the 4 column template used for this blog are:

Overall
#outer-wrapper {
width: 990px;
margin:0 auto;
padding:0;
text-align:left;
font: $bodyfont;
}

Main column
#main-wrapper {
margin:0 0 0 20px;
width: 450px;
float: left;
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 */
}

Left sidebar
#left-column {
width: 163px;
float: left;
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 */
}

First right sidebar
#rightsidebar-left {
margin:0 0 0 10px;
width: 163px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

second right sidebar
#rightsidebar-right {
width: 164px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

Note that the total widths of the main column plus the 3 sidebars = 450+163+163+164 = 940 pixels

The overall width is 990px. The difference = 990 - 940 = 50 pixels are taken up by the margins.

If you do not want to change the overall width, but only want to change the widths of the sidebar and/or the main column, what you should do is to make sure the the total widths of the main column plus the sidebars are alway 940 pixels (assuming you want the margins to be maintained)

For example, I want to change the main column to 400 pixels. Thus there will be an extra 50 pixels to be distributed among the 3 sidebars. Thus I might add 30px to the first sidebar, 10 each to the 2 right sidebars. Thus the new widths will be

Left sidebar = 163 + 30 = 193
Main column = 450 - 50 = 400
First right sidebar = 163 + 10 = 173
Second right sidebar = 164 + 10 = 174

and that part of the CSS become

Overall (no change)
#outer-wrapper {
width: 990px;
margin:0 auto;
padding:0;
text-align:left;
font: $bodyfont;
}

Main column
#main-wrapper {
margin:0 0 0 20px;
width: 400px;
float: left;
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 */
}

Left sidebar
#left-column {
width: 193px;
float: left;
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 */
}

First right sidebar
#rightsidebar-left {
margin:0 0 0 10px;
width: 173px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

second right sidebar
#rightsidebar-right {
width: 174px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

ANOTHER EXAMPLE:

You want to make the whole blog wider to, let's say 1200 pixels wide. That means there will be an extra 1200-990=210 pixels to be distributed among the 4 column. Thus I may add, for example, 120 to the main column, and 90 (30 each) for the 3 sidebars.
Thus
overall width = 1200
Main column = 450 + 120 = 570
Left sidebar = 163 + 30 = 193
First right sidebar = 163 + 30 = 193
Second right sidebar = 164 + 30 = 194