This here is a test of the column layouts. You can see how columns are implemented by looking at the code used. Code is modified from an original plugin that only supported 2 columns to support 3 or 4 (though 3 is preferable for our site width).
One thing that needs to be remembered is that we won’t be displaying columns on the front page – that means there has to be a subhead or introduction paragraph before you implement the column system – otherwise you’ll break the site by making the front page look horrendously ugly and stretched vertically.
3 Columns
Column 1 content goes here. As you can see, the percentage is at 30% with padding at 5% – this padding is relative to the width of the content area as is the overall width percentage. This means that the column will take up 30% of the total content width (the post area – does not include the sidebar) minus the 5% padding on the right side of just the first 2 columns combined as this is a 3 column layout – that means the padding of the last column has to be “0″ as there needs not be any space on the right of it.
The 30% value is already pre-calculated – that is, if we have 2 columns with 5% padding, it comes to a total of 10% padding, which gives us 90% usable area. This means that if there are 3 columns to be divided evenly, 90/3 = 30. Column width’s can be manipulated as can padding widths.
Column 2 content goes here. As you can see, the percentage is at 30% with padding at 5% – this padding is relative to the width of the content area as is the overall width percentage. This means that the column will take up 30% of the total content width (the post area – does not include the sidebar) minus the 5% padding on the right side of just the first 2 columns combined as this is a 3 column layout – that means the padding of the last column has to be “0″ as there needs not be any space on the right of it.
The 30% value is already pre-calculated – that is, if we have 2 columns with 5% padding, it comes to a total of 10% padding, which gives us 90% usable area. This means that if there are 3 columns to be divided evenly, 90/3 = 30. Column width’s can be manipulated as can padding widths.
Column 3 content goes here. As you can see, the percentage is at 30% with padding at 5% – this padding is relative to the width of the content area as is the overall width percentage. This means that the column will take up 30% of the total content width (the post area – does not include the sidebar) minus the 5% padding on the right side of just the first 2 columns combined as this is a 3 column layout – that means the padding of the last column has to be “0″ as there needs not be any space on the right of it.
The 30% value is already pre-calculated – that is, if we have 2 columns with 5% padding, it comes to a total of 10% padding, which gives us 90% usable area. This means that if there are 3 columns to be divided evenly, 90/3 = 30. Column width’s can be manipulated as can padding widths.
2 Columns
Column 1 content goes here. This here is just to demonstrate what it is like to have 2 columns. Padding width has been manipulated to be wider (6%) as we have more space to work with – a greater overall proportion. Respectively, 3% have been removed from each column’s total width to fulfill the 100% requirement.
Column 1 content goes here. This here is just to demonstrate what it is like to have 2 columns. Padding width has been manipulated to be wider (6%) as we have more space to work with – a greater overall proportion. Respectively, 3% have been removed from each column’s total width to fulfill the 100% requirement.
Column 2 content goes here.This here is just to demonstrate what it is like to have 2 columns. Padding width has been manipulated to be wider (6%) as we have more space to work with – a greater overall proportion. Respectively, 3% have been removed from each column’s total width to fulfill the 100% requirement.
Column 2 content goes here.This here is just to demonstrate what it is like to have 2 columns. Padding width has been manipulated to be wider (6%) as we have more space to work with – a greater overall proportion. Respectively, 3% have been removed from each column’s total width to fulfill the 100% requirement.
4 Columns
Column 1 content goes here. Even 4 columns are possible, with further manipulation of the column width’s and padding values (22% and 4% respectively). The total still has to add up to 100%. 4 columns, however, is not a particularly viable option for the Brouhaha site as we’re too narrow in the content section.
Column 1 content goes here.
Even 4 columns are possible, with further manipulation of the column width’s and padding values (22% and 4% respectively). The total still has to add up to 100%. 4 columns, however, is not a particularly viable option for the Brouhaha site as we’re too narrow in the content section.
Column 2 content goes here. Even 4 columns are possible, with further manipulation of the column width’s and padding values (22% and 4% respectively). The total still has to add up to 100%. 4 columns, however, is not a particularly viable option for the Brouhaha site as we’re too narrow in the content section.
Column 2 content goes here.
Even 4 columns are possible, with further manipulation of the column width’s and padding values (22% and 4% respectively). The total still has to add up to 100%. 4 columns, however, is not a particularly viable option for the Brouhaha site as we’re too narrow in the content section.
Column 3 content goes here. Even 4 columns are possible, with further manipulation of the column width’s and padding values (22% and 4% respectively). The total still has to add up to 100%. 4 columns, however, is not a particularly viable option for the Brouhaha site as we’re too narrow in the content section.
Column 3 content goes here.
Even 4 columns are possible, with further manipulation of the column width’s and padding values (22% and 4% respectively). The total still has to add up to 100%. 4 columns, however, is not a particularly viable option for the Brouhaha site as we’re too narrow in the content section.
Column 4 content goes here. Even 4 columns are possible, with further manipulation of the column width’s and padding values (22% and 4% respectively). The total still has to add up to 100%. 4 columns, however, is not a particularly viable option for the Brouhaha site as we’re too narrow in the content section.
Column 4 content goes here.
Even 4 columns are possible, with further manipulation of the column width’s and padding values (22% and 4% respectively). The total still has to add up to 100%. 4 columns, however, is not a particularly viable option for the Brouhaha site as we’re too narrow in the content section.
To give you a further ideas of things that can be done with this column system to make our online site more resemble a magazine, let me show off what can be done.
Some more examples of how this system can be used.
You continue your article here, as this is on the left side – the quote will be on the right side. Please be aware that you need to adjust the length of the continuation of your article in this left hand side column to match the length of the quote. If one side is too much longer than the other you get awkward white space where there should be printed words of wisdom, as bestowed by yourself. For your reference, this is a 2 column design with the first column (left) width set to 67% and the second set to 27% (padding remains the same at 6%.)
“This here is your quote. Quote quote quote. Quote-ables, notables, noble folk and more!”
There we go. As you can see, the quote has been implemented into the article quite nicely and snugly. That means we can be implementing this into blogs to highlight certain things or just to make the whole site look snazzier and smoother. But what if we want to implement this into a 3 column design? That is, we go 3 column – 2 column (with quote) – 3 column. No problemo, it is essentially the same thing.
So we have our column 1 content. This is content for columns, and more column one content is yet to come. The thing is, this line as to be sufficiently long so that the column doesn’t end up looking stunted – that is, enough short words to make even line breaks.
So we have our column 2 content. This is content for columns, and more column one content is yet to come. The thing is, this line as to be sufficiently long so that the column doesn’t end up looking stunted – that is, enough short words to make even line breaks.
So we have our column 3 content. This is content for columns, and more column one content is yet to come. The thing is, this line as to be sufficiently long so that the column doesn’t end up looking stunted – that is, enough short words to make even line breaks.
“This here is your quote. Quote quote quote. Quote-ables, notables, noble folk and more!”
You continue your article here, as this is on the left side – the quote will be on the right side. Please be aware that you need to adjust the length of the continuation of your article in this left hand side column to match the length of the quote. If one side is too much longer than the other you get awkward white space where there should be printed words of wisdom, as bestowed by yourself. For your reference, this is a 2 column design with the first column (left) width set to 67% and the second set to 27% (padding remains the same at 6%.)
So we have our column 1 content. This is content for columns, and more column one content is yet to come. The thing is, this line as to be sufficiently long so that the column doesn’t end up looking stunted – that is, enough short words to make even line breaks. So we have our column 1 content. This is content for columns, and more column one content is yet to come. The thing is, this line as to be sufficiently long so that the column doesn’t end up looking stunted – that is, enough short words to make even line breaks.
So we have our column 2 content. This is content for columns, and more column one content is yet to come. The thing is, this line as to be sufficiently long so that the column doesn’t end up looking stunted – that is, enough short words to make even line breaks. So we have our column 2 content. This is content for columns, and more column one content is yet to come. The thing is, this line as to be sufficiently long so that the column doesn’t end up looking stunted – that is, enough short words to make even line breaks.
So we have our column 3 content. This is content for columns, and more column one content is yet to come. The thing is, this line as to be sufficiently long so that the column doesn’t end up looking stunted – that is, enough short words to make even line breaks.
So we have our column 1 content. This is content for columns, and more column one content is yet to come. The thing is, this line as to be sufficiently long so that the column doesn’t end up looking stunted – that is, enough short words to make even line breaks.
So we have our column 1 content. This is content for columns, and more column one content is yet to come. The thing is, this line as to be sufficiently long so that the column doesn’t end up looking stunted – that is, enough short words to make even line breaks.
So we have our column 2 content. This is content for columns, and more column one content is yet to come. The thing is, this line as to be sufficiently long so that the column doesn’t end up looking stunted – that is, enough short words to make even line breaks.
So we have our column 1 content. This is content for columns, and more column one content is yet to come. The thing is, this line as to be sufficiently long so that the column doesn’t end up looking stunted – that is, enough short words to make even line breaks.
So we have our column 3 content. This is content for columns, and more column one content is yet to come. The thing is, this line as to be sufficiently long so that the column doesn’t end up looking stunted – that is, enough short words to make even line breaks.
So we have our column 1 content. This is content for columns, and more column one content is yet to come. The thing is, this line as to be sufficiently long so that the column doesn’t end up looking stunted – that is, enough short words to make even line breaks.