The Blog Post Section and Sidebar Section should be the most important sections in a blog. However, the default width of WordPress Blog Post Section and Sidebar Section are sometimes not satisfactory to many bloggers.

Take a look at the WordPress Blog Post Section and Sidebar Section:

Let’s see how to modify the width of WordPress Blog Post Section and Sidebar Section.

As we learned before that the Blog Post Section is held in the #container and #content div layers. Take a look at the source codes of Blog Post Section:

This is clear that the WordPress Blog Post Section is wrapped by two div layers – the #container div layer at the outer and the #content div layer at the inner.

Open the WordPress stylesheet and navigate to #container and #content selectors:

Firstly, look at the #container div layer:

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

What? the margin-right has a  -240 pixels? This is a negative margin! Let’s see what is the difference between a positive margin that we are always using and a negative margin that we rarely use or never use.

Positive Margin

A positive margin will push OUTSIDE the div layer as shown in the diagram below:

Negative Margin

A negative margin is just the reverse. It will pull INSIDE the div layer as shown in the diagram below:

Let’s see what happens if an inner #content div layer is wrapped inside an outer #container div layer. Actually this situation is same as the WordPress Main Contents Section:

Study the above diagram carefully. A negative margin of the outer #container div layer will not pull the width of the inner #content div layer inside. In other words, the width of the inner #content remains the same.

How about adding a right margin to the inner #content layer? The result is shown in the diagram below:

Most bloggers rarely use negative margin except in some special situation. Sometime, negative margin is quite difficult to understand to most webmasters.

Now let’s review the #container div layer again:

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

The layout of #container div layer simply look like:

As we learned that the negative margin of #container div layer will not affect the inner #content div layer. The width of the inner #content div layer can simply be changed by modifying the right margin. Let’s change the right margin of #content div layer from 280 pixels to 400 pixels.

To see the result more easily, a border has also been added to the #content div layer.

#content {
    margin: 0 400px 0 20px;
    border: 1px solid #00ffcc;
}

As expected, the result is:

Modify the Width of WordPress Sidebar

The Sidebar is held in the primary div layer, and secondary div layer if there is secondary widget area. The source codes of the Sidebar is shown as below:

To change the width of Sidebar should be easy now. How about make the Sidebar a bit wider? Okay, I will change the Sidebar from 220 pixels to 360 pixels.

The first idea is to change the width of primary div layer and secondary div layer to 360 pixels.

#primary,
#secondary {
    float: right;
    overflow: hidden;
    width: 360px;
}

Refresh browser to see the changes.

Uh-oh! The Sidebar push to the bottom. What happens? The margin of #content div layer is 400 pixels. There should be enough room for the Sidebar which is only 360 pixels wide.

Ah…. Remember the negative margin of #container layer? The margin of #container div layer is -240 pixels. Therefore the situation is now looks like:

Everything should be clear right now. To solve the problem, simply change the width of #container div layer to -400 pixels:

#container {
    float: left;
    margin: 0 -400px 0 0;
    width: 100%;
}

The final result will be as shown in the diagram below:

Let’s summarize what have been changed in the stylesheet to make the width of Blog Post Section smaller and the width of Sidebar wider:

/*
LAYOUT: Two columns
DESCRIPTION: Two-column fixed layout with one sidebar right of content
*/

#container {
float: left;
margin: 0 -400px 0 0;
width: 100%;
}
#content {
margin: 0 400px 0 20px;
}
#primary,
#secondary {
float: right;
overflow: hidden;
width: 360px;
}

This is the end of modifying the Blog Post and Sidebar sections of WordPress.