Next posts next to each other on Home?

  • Hello,

    I’d like to find out how I could code my index page to make my posts posts appear horizontally as opposed to vertically.

    Here’s an example of how the final result, when coded properly, would look like:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Post Title 3 Blah Blah Blah Blah</title>
<style type="text/css">
#posts {
	width: 620px;
	margin-right: 5px;
	padding:0;
}
#posts h2 {
	border-bottom: 1px #c2c2c2 solid;
	margin: 0;
	padding: 0;
	line-height: 20px;
	font-size: 16px;
}
#posts div {
	width: 200px;
	margin-left: 5px;
	float: left;
}
#post1 {

}
#post2 {

}
#post3 {
}
</style>
</head>

<body>

<div id="posts">
	<div id="post3">
		<h2>Post Title 3</h2>
		Blah Blah Blah Blah BlahBlah Blah Blah Blah BlahBlah Blah Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah Blah Blah BlahBlah Blah Blah Blah Blah

	</div>
	<div id="post2">
		<h2>Post Title 2</h2>
		Blah Blah Blah Blah BlahBlah Blah Blah Blah BlahBlah Blah Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah Blah Blah BlahBlah Blah Blah Blah Blah

	</div>
	<div id="post1">
		<h2>Post Title 1</h2>
		Blah Blah Blah Blah BlahBlah Blah Blah Blah BlahBlah Blah Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah Blah Blah BlahBlah Blah Blah Blah Blah

	</div>
</div>

</body>

</html>

    Any thoughts?

Viewing 3 replies - 1 through 3 (of 3 total)

  • If you mean two post columns for content, then it is quite simple!

    Twenty Ten Theme:

    Add CSS in style.css

    #cms-column
{
	float:left;
	position: relative;
	width: 50%;
}

    loop.php
    Starts after the loop

    <?php while ( have_posts() ) : the_post(); ?>

<?php /* This is our two columns loop */ ?>
<div id="cms-column">

    Then down to the endwhile!

    <?php /* closing div for the two columns */ ?>
</div>

<?php endwhile; // End the loop. Whew. ?>

    This is ok and I use it to show just the thumbnail and excerpt, because of images in posts, if I have big images I could add overflow:hidden but it is not a good look, so excerpts and thumbnails.

    Just like this demo
    digitalraindrops.net/demo/wordpress/plasiticity2010/entertainment/

    David

    Thread Starter Aloupha

    (@aloupha)

    I am not really looking for two columns for posts. What I am looking for is for each post to show horizontally. ( I can limit the amount of posts through the settings.

    I am going to play with what you posted and see if it could lead me somewhere.

    Thread Starter Aloupha

    (@aloupha)

    Hey,

    Your method will work to give me the three columns. I will have to play around with it to get the exact size.

    Changing the width from 50% to 30% gave me the three columns but messy. I am sure I’ll be able to fix that. Thanks for your help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Next posts next to each other on Home?’ is closed to new replies.