WordPress Tutorials Index | Web Page Design Tutorials Home

Modify Width of WordPress Blog Post and Sidebar Section

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:

Modify width of Blog Post and Sidebar of WordPress

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:

Modify width of Blog Post and Sidebar of WordPress

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:

Modify width of Blog Post and Sidebar of WordPress

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 postive margin will push OUTSIDE the div layer as shown in the diagram below:

CSS Positive Margin

Negative Margin

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

CSS Negative Margin

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:

CSS Negative Margin

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:

CSS Negative Margin

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:

Modify width of Blog Post and Sidebar of WordPress

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 width of Blog Post and Sidebar of WordPress

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:

Modify width of Blog Post and Sidebar of WordPress

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.

Modify width of Blog Post and Sidebar of WordPress

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:

Modify width of Blog Post and Sidebar of WordPress

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:

Modify width of Blog Post and Sidebar of WordPress

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.