The 3 Column Layout has sidebar content in the first column, blog content in the middle column, and another sidebar column 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 Layout Default Code----------------------*/
.layout-three-column #alpha { width:190px; margin-right:15px; }
.layout-three-column #beta { width:570px; }
.layout-three-column #gamma { width:190px; }
This sets the first sidebar column at 190 pixels wide, and puts 15 pixels of space on the right hand side of it before starting the next column. The second column, where the content goes, is 570 pixels wide. The third column is 190 pixels to match the first.
It is not needed to set margin-right on the second 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 thin first column (175 pixels) and a nice wide third column (290 pixels), and with the content area taking up the rest in the middle (480 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