Change width of Blog template, sidebar, main-1

continue from previous........

#main-wrapper
In general this is the post area which we use to post all our content. Generally this is one column in webpage. Another column is sidebar. So these two shares the space side by side in outer wrapper and aligns after header in body of webpage. So you have to decide how much width should be your main wrapper.

Ex: if you want 500px exact usable post area for your main wrapper then give width as 500px. If you want some space on all sides to your post content then give padding for that, say 5px. When you give padding 5px your net usable area will be 480px. If you want exactly 500px for your usage purpose, then change width of main-wrapper form 500 to 510px, so that you will get 500px content area and 5px on both sides of post as padding and looks good also. If you want some space between your main and sidebar then give margin. This margin will not share your main-wrapper-width, it will take extra to the given value. That means if you give 6px as margin to main wrapper, then your main wrapper width becomes 500px+10px padding+12px margin=total 522px.

If your sidebar is on right side of your main wrapper, then you no need to give margin on left side of your sidebar. Just top, right and bottom is enough, because main wrapper already it had 6px margin on all sides.

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


#sidebar-wrapper
This is second column of your web page. For this also all the rules of main-wrapper will hold. So follow all the rules from main-wrapper section.

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


#footer
This is the last one in webpage. For this also all the rules will apply like main wrapper. Generally this will not share its width with others wrappers. So we can take its width like exactly the width of header wrapper. So the look of web page can be uniform.

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


Now we will see the attributes of these elements of web page:

Each of the above elements it will have its own features. These features are like:  Margin, Padding, Width, Height, Float, Border, Background, font, color, text-align, text-transform. We can use all these for any element.
Now we see how each of these features will work and then we will go to the page elements how to change these features for them and how they will behave for each change.

Margin:
We use this feature for giving margin for particular item excluding its value. This means if your main wrapper width is 500px, and you had given 5px margin means total width of your main is 500+5px margin left side+5px margin right side = 510px total width of your main wrapper. And height is your main height + 10px margin inducing top and bottom.

Margin has values like this:  We can give values for this as follows:
margin: 5px; or
margin-left: 5px; or margin-$startSide: 5px;
margin-right: 5px; or margin-$endSide: 5px;
margin-top: 5px;
margin-bottom: 5px;

If you say: “ margin:5px;” (particular item will get 5px margin on all the sides in single declaration, i.e., top, right, bottom, left )

If you want to restrict it for a particular side or sides then you need to use these:
margin-left: 5px; or margin-$startSide:5px; (only left side it will get 5px margin)
margin-right: 5px; or margin-$endSide:5px; (only right side it will get 5px margin)
margin-top: 5px; (only top side it will get 5px margin)
margin-bottom: 5px; (only bottom side it will get 5px margin)

For example if u give margin-top: 5px; means only top it will give 5px margin and remaining will be 0px.

Padding:
This also works like margin, but we use this feature for giving padding for particular item including its value. It will give a space within the item and useful for good look. That is if you say width 500px for your main wrapper and padding 5px, then the original usable area of main wrapper width is 490px. Remaining 10px will go to left padding-5px and right padding-5px.

We can give values for this as:
padding:5px; or
padding -left: 5px; or padding -$startSide:5px;
padding -right: 5px; or padding -$endSide:5px;
padding -top: 5px;
padding -bottom: 5px;

If you say: “padding: 5px;” (particular item will get 5px padding on all the sides in single declaration, i.e., top, right, bottom, left)

If you want to restrict it for a particular side or sides then you need to use these:
padding -left: 5px; or padding -$startSide:5px; (only left side it will get 5px padding)
padding -right: 5px; or padding -$endSide:5px; (only right side it will get 5px padding)
padding -top: 5px; (only top side it will get 5px padding)
padding -bottom: 5px; (only bottom side it will get 5px padding)

For example if u give padding -top: 5px; means only top it will give 5px padding and remaining will be 0px.

| Previous | Home | Next |