The 3 Column-Right Layout has blog content in the first column, and two sidebar columns on the right:
In the screenshot, we have added temporary helper borders so we could easily tell what we are looking at:
Here is what the default code for widths looks like for the columns:
/*---3 Column-Right Layout Default Code-------------------*/
.layout-three-column-right #alpha { width: 570px; margin-right: 15px; }
.layout-three-column-right #beta { width: 190px; }
.layout-three-column-right #gamma { width: 190px; }
This sets the blog content column at 570 pixels wide, and puts 15 pixels of space on the right hand side of it before starting the next column. The second and third columns are each 190 pixels wide.
It is not needed to set margin-right on the beta column, because the third column floats to the right and any leftover space is automatically put between the second and third column.
New Widths
We are going to change the size of our columns to use a wide first sidebar column (300 pixels) and a thin second sidebar column (175 pixels), and with the content area taking up the remainder (470 pixels):
After adding the lines above to our Custom CSS, there are our newly sized columns!
If one of your columns disappears and drops down to the bottom of the layout, then your total column area is too wide. Decrease the widths of the columns until everything stays on the same line.
Comments