The 2 Column-Left Layout has the sidebar in the first column, and blog content 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:
/*---2 Column-Left Layout Default Code-------------------*/
.layout-two-column-left #alpha { width: 190px; }
.layout-two-column-left #beta { width: 770px; }
This sets the sidebar column at 190 pixels wide, and content column at 770 pixels wide.
The sidebar column floats to the left, and the content column floats to the right. Any leftover space is automatically put between the sidebar column and content column.
New Widths
We are going to change the size of our columns to use a wide sidebar column (310 pixels) and with the content area taking up the remainder (650 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