Setting Column Widths - 1 Column Layout

The One-Column layout has the blog content area filling the entire width of the container area, and has the sidebar modules positioned at the bottom:

In the screenshot, we have added temporary helper borders so we could easily tell what we are looking at:

/* Outline main columns */ #container { border:1px dashed red; } .layout-one-column #alpha .module { border: 1px dashed blue; }

Here is what the default code for widths looks like for the columns:

/* Page Width */
#container { width: 1000px; }
/* Sidebar modules at the bottom */
.layout-one-column #alpha .module { width:290px; margin: 0 25px 0 0; }

New Widths

We are going to change the container to 800 pixels wide. In doing that, we will also decrease the width of the modules at the bottom so they have enough room:

/* Page Width */ #container { width: 800px } /* Sidebar modules at the bottom */ .layout-one-column #alpha .module { width:225px; }

After adding the lines above to our Custom CSS, there are our newly sized columns!