Column Widths

Setting Column Widths - 3 Column Layout

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.

in Column Widths | | Comments (0)

| | |

Setting Column Widths - 3 Column-Right Layout

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.

in Column Widths | | Comments (0)

| | |

Setting Column Widths - 2 Column-Right Layout

The 2 Column-Right Layout has blog content in the first column, and 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:

/*---2 Column-Right Layout Default Code-------------------*/
.layout-two-column-right #alpha { width: 770px; }
.layout-two-column-right #beta { width: 190px; }

This sets the blog content column at 770 pixels wide, and sidebar column that is 190 pixels wide.

The blog content floats to the left, and the sidebar column floats to the right. Any leftover space is automatically put between the content column and sidebar.

 

New Widths

We are going to change the size of our columns to use a super-wide sidebar column (410 pixels) and with the content area taking up the remainder (550 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.

in Column Widths | | Comments (0)

| | |

Setting Column Widths - 2 Column-Left Layout

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.

in Column Widths | | Comments (0)

| | |

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:

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:

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

in Column Widths | | Comments (0)

| | |