Setting up a Column Layout

WordPress

Many people like the look of multiple columns for their text.  This format resembles a newspaper, and there are a number of reasons why you might want to format your WordPress blog like this.  However, it is not exactly the easiest thing to do.  You can go looking for specific themes or purchase expensive plugins that will do this for you, but do you really want to do that?  Most people who create WordPress sites are doing so for their personal blog or as a website for a small business, and they do not want or cannot afford to spend a lot of money on it.  Fortunately, this WordPress tutorial will walk you through the steps necessary to create your own column layout.

Creating these columns will involve doing some work in the HTML code of your each WordPress blog. Luckily, it is actually fairly easy to do.  Just click on the text editor and enter the correct code.  If you want to create a three-column blog, here’s the coding:

<div style = "width:33%; padding:0 10px 0 0;float:left;">

Then type in your content for column one.  When you are finished, end the final line of content with </div>.

Then add this line:

<div style = "width:33%; padding:0 10px 0 0;float:left;">

This will do the middle column.  Again, end the last line of content with </div>.

For the third column:

<div style = "width:33%; padding:0 10px 0 0;float:right;">

This will create the third column and actually align everything in it to the right.  Therefore, you will have something like this:

Column 1                            Column 2                            Column 3

The first two columns will be left aligned, while the third will be right aligned.

You can change how the columns look by modifying the code.  Let us break down what this line of HTML actually does.

<div style = "width:33%; padding:0 10px 0 0;float:left;">

div style – this is the command that tells WordPress that you’re creating a text division, which can be a paragraph, column, or even a sentence.

width: 33% – this is the width of the column.  For three columns that are the same width across, you would divide the entire area by three.  So 100% of the width divided by 3 columns means each column will be about 33% of the total size.

padding: 0 10px 0 0; – this is the amount of padding between the columns and the rest of the page.  The four numbers correspond to the blank space to the top, right, bottom, and left of the column.  In this case, there is 0 top padding, 10 pixels (px) worth of right padding, 0 bottom padding, and 0 left padding.  The 10px right padding makes certain that there is a little bit of space between your columns.  You can increase or decrease this space if you like.  If you want the columns to stand out from content above and below them, you can add some padding to the top and the bottom.

float:left; – This is the alignment of the text.  You can change it to right or center if you like.

This method gives you full control over what your columns look like, and it is completely free.

Share it!Share on FacebookTweet about this on TwitterShare on Google+Email this to someone

Our Recommended Wordpress Web Hosting Provider

WordPress

WHC.CA
Get a 50% Discount by using our link.

WHC.ca

Reliable host, with excellent customer service and an easy one-click Wordpress installation. Our recommendation to host a Wordpress blog.

Leave a Reply

Your email address will not be published. Required fields are marked *