I was looking for something like this and I found the tutorials to be way too much work. This is a very simple set up using 100% css. This is what I did:
Go into index.php and find the following lines of code:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
below these lines you should see something like
<div class="single" id="post-<?php the_ID(); ?>">
assuming you will have other objects inside of your “content” div, we are going to put a div around the “single” div. For this example, lets say we are creating a “latest news” section on the index page that will display the last 10 posts from the “news” category. Lets call the new div “news”.
Our code should look something like this:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div id="news">
<div class="single" id="post-<?php the_ID(); ?>">
Depending on what you want to show up in each post, you will have some code in here. Such as the title, excerpt, and a read more link. All we need to do at this point is close our “news” div.
Find the following line of code:
<?php endwhile; ?>
Now we just need to close our div before that line. It should look like this:
</div><!--single-->
</div><!--news-->
<?php endwhile; ?>
I have tagged each div so you understand exactly how the code will be set up.
Now we just need to make some changes in the style.css file.
First, lets create some css for the news div. Note the -10px left margin, that will keep us lined up with the content of the page.
#news {
width: 100%;
margin-left: -10px;
}
Now we need to edit the .single class.
.single {
float: left;
width: 300px;<!--This can be whatever width you like-->
margin: 0px 0px 0px 10px;<!--This will create a 10px space between each of your columns.
padding: 5px;<!--Once again, set this to your preferences-->
}
So lets say for example we have a 2 column template design with the content width set to 610px. This would create two columns in the content area that would each be 300px wide with a 10px space between them. The rest of the attributes (i.e. title, content, excerpt) will fill the column accordingly.
Depending on how wide you set each column and how much room you have to work with, you can have as many columns as you wish. For example, if you had 610px width and set the width of .single to 190px, you would end up with 3 columns.
Hope this helps anyone looking to do this type of layout.
