Change width of Blog template, sidebar, main

This is a big question for the people those are blogging newly. For these new people I am giving a simple and easiest procedure to make changes for template and its attributes.

To do these changes you need to understand few html concepts (don’t fear this is very simple to understand), which will appear in your template. If you understand it then it will becomes very easy for you to change your template.
(The main idea of this is to make a common person literate and understand about their blog template, to make simple adjustments and change it, but not to teach html or follow its rules, so there may be few mistakes in the name what I am calling them.)

So, first look at this picture:
Our template will look like this and contains these elements in body:

Now we see each one of these in detail, we discuss how to use their attributes.

Body:
It is the total displayed area or the full or maximum screen size and original background of our webpage.
For this generally we can use these attributes: Background, Margin, Padding, font, color.

#outer-wrapper:
This is the original size of our webpage for which we can define width and height.
Generally the size of any commuters’ screen size will be displayed in 1024*768 px. In this 1024 is width and 768 is height of your computers monitor display setting. Height can be scrollable easily with the help of mouse scroll button, but width is not good to scroll, it seems to be odd thing to many people. So you can set your web page size as not more than 1000px. (This is the maximum size of your webpage; you can also define more width but need to scroll in horizontally, which may give some bad effect on your website visitors.) The remaining 24px will goes to scroll button on right side of monitor screen which defaults from operating system.

So you have to decide how much will be your outer wrapper or page width. This should be including margins etc. i.e., your main wrapper, sidebar wrappers and any other columns size including margin, padding and border, can be equal to this outer wrappers size.

Ex: outer wrapper is 800px. So, main is 500px which includes 5px padding (net main usable size is 490px) and margin is 5px, then total width of main is 510px including margin. Now you left with 290px. If your sidebar size is 260px (includes padding 5px, with net usable area or width is 250px), margin 5px, then total width of sidebar is 270px. Now you have 20px width of free space in your outer wrapper. This you can utilize to give margin on left and right sides 10px.
Like this you have to do adjustments to your webpage.

For this we can use these attributes: Background, Width, Margin, Padding, font, and text-align


#header-wrapper
This we use to display title of website or for any other purpose. Its width should be equal or less than the outer wrappers width to look good. The width of this can be calculated by subtracting from outer wrappers width (after removing padding if any for outer wrapper).

Ex: outer wrapper is 800px with padding 10px for outer wrapper on the left and right side. Now header wrappers width can be 780px.

For this we can use these attributes: Background, Width, Margin, Padding, Float, font, text-transform and text-align

| Home | Next Page |