Change Column Width Templates

There may be some of the gentlemen friend there who feel very fond of a template, but there are bumps that column widths are not according to our wishes, be it big or too mainbar sidebar column (column a post). There are times when the column width of a template in a sense too wide or too narrow, well if my friend had such a case, rather there are tips for befoul the column width to our own liking.

To determine the column width of a template, we can recognize it by its CSS style sheet. But of course there is a difference between one template with another template, is certainly up to the designer its own template. As an example for the header, if according to the standard blogger template in its CSS style sheet in the header call, but for the artificial templates of other designers out there who call Banner bloggers or other names. A name would not affect the results you can, the name is in use is so easy to remember or recognize by the user template if you want to do editting templates.

That is not too confusing, I take the example of the template minima 3 column which can be downloaded here!. After seeing the development of this template was much liked. If my friend was not satisfied with the width of columns in the template, please follow the following tips deh let the width of columns in accordance with the wishes buddy. Where is the location of the code to set the column width? I give an example:
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;

}

#sidebar-wrapper {
width: 220px;
float: right;
}

#newsidebar-wrapper {
width: 200px;
float: left;
}

As seen in the above code, which affects the width of the column is that I printed in red.So it's easy not to recognize it. 900px is a value that is equal to 900 pixels wide.

In order to more schools, the above code I have described:

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

This means the header-wrapper has a width of 900px and have a border (I mean the border is a frame or border) of a pixel with a solid line (solid = solid line. Dashed = dashed line. = Dotted line as dots) with border color that we can change change (in the font and color).

header-wrapper is just naming it, is not absolute. If it is changed by the name of the head is also not nothing. width: 900px; mean width of 900 pixels. nah this is the value of 900 pixels which can change as our buddy, want plus make it wider, or let you subtract the smaller. However, my advice, the value of this header must be equal to the width of the body to make it look nice. border: 1px solid $ bordercolor; is that the header has a border of 1 pixel, if you want thicker friend just add the value, or if my friend wants this border does not exist, my friend just delete this code.

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

This means that the outer-wrapper has a width of 900px, a distance of 10 pixels between align it with the average left-right and fonts can be changed to change the font and color panels.

outer wrapper is only a name. width: 900px; mean width is 900 pixels. 900 pixels is the width provided for the existing columns, call it in this column main-wrapper, sidebar-wrapper and sidebar-wrapper. So in other words the outer wrapper is the sum of the width of the column main-wrapper, sidebar-wrapper and sidebar-wrapper. When my friend include content that exceeds the width of each column, it will automatically be more spec than the width provided by the outer wrapper and what happens is one of the columns will sag down and this makes our blog to be less pleasant to the eye. So if you want to change the width of one column among the three, then the width of the outer wrapper must be changed and adjusted.

#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;

}

This means that the column main-wrapper has a width of 435 pixels to the right margin of 20 pixels, 20 pixel left margin and put this column on the left.

main-wrapper is the posting page column, anything we post will go to this page. width: 435px; this column means that the width of 435 pixels, but since using margin-left and margin-right, then the actual column width is equal to 475 pixels. However, the 40 pixels is only an interval in order to limit the column does not touch. If you feel the column is too narrow or too small, then add the value, for example 550 pixels. When my friend intend to change this column, the column outer-wrapper had to be in added value. examples where the main-wrapper to be 550 pixels, then 550px-475px = 75px. This means the column outer-wrapper should be added for 75px, so 900px +75 px = 975px.

#sidebar-wrapper {
width: 220px;
float: right;
}

This means sidebar-wrapper has a width of 220 pixels and in place the right of the screen.

Sidebar-wrapper is a sidebar column or columns where we store various accessories or any others. width: 220px; means has a width of 220 pixels, if you want in on the broadening or narrowing, then we only need to change the pixel value only. Only when changing the value of this column, do not forget to change the value of space provided by outer-wrapper. example: if this column is enlarged to 250 pixels, then the extra pixels are 30 pixels, and do not forget to also add the column outer-wrapper.

#newsidebar-wrapper {
width: 200px;
float: left;
}

This means that the column sidebar-wrapper has a column width of 200 pixels and placed on the left screen.

Like the sidebar-wrapper, column sidebar-wrapper is a place to store various accessories or tools. This column is made more so that we can load a variety of accessories that we want. This column sidebar-wrapper width of 200px, now when intending to change it then just change the pixel value, but do not forget to also add the column outer-wrapper.