Title: 2×3 rectangular post list layout
Last modified: August 19, 2016

---

# 2×3 rectangular post list layout

 *  Resolved [xrun](https://wordpress.org/support/users/xrun/)
 * (@xrun)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/2x3-rectangular-post-list-layout/)
 * Hi.
    I’d like to make the posts appear in a 2 by 3 rectangular layout when listing
   posts in one of my categories (news). I have a page called page-news.php, and
   I’ve made separate divs in the css for the main page area between the sidebars,
   and for title, content, and meta for this page. The area where the posts are 
   to be listed is 580px wide, and I need the posts to be listed in a rectangular
   layout with 2 posts at 260 pixels wide side by side, and 3 high for a total of
   the 6 latest posts, with the two newest at the top. I just need a little help
   getting the posts to show up side by side instead of all listing in a single 
   narrow column in the main page area.

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

 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/2x3-rectangular-post-list-layout/#post-1635039)
 * to make this less hypothetical, and to get you more detailed help, could you 
   post a link to your site?
 * generally, you could add a `float:left;` to the style of the post div; and adjust
   the width amd margins to fit into your space.
 * if your posts are of diffenrent heights, you may need to add some code to the
   loop, to add an extra css class, such as ‘.left’ or ‘.first’ or so.
 *  Thread Starter [xrun](https://wordpress.org/support/users/xrun/)
 * (@xrun)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/2x3-rectangular-post-list-layout/#post-1635097)
 * Ok, so in the page-news.php i put a div for the page contents at 580px wide, 
   then one for the posts at 260px wide (will adjust to fit later), and this last
   one also has a float:left; in the css? I tried that, but all the posts listed
   below eachother in a 260px column to the left in the page contents area.
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/2x3-rectangular-post-list-layout/#post-1635099)
 * check the `padding` and `margin` in your styles (padding adds to the width), 
   and make sure not to have a `clear:both;` or `clear:left;` in the style with 
   the float.
 *  Thread Starter [xrun](https://wordpress.org/support/users/xrun/)
 * (@xrun)
 * [15 years, 8 months ago](https://wordpress.org/support/topic/2x3-rectangular-post-list-layout/#post-1635133)
 * Still doesn’t work. This is the css for the news page, margins should be good
   and no clears anywhere. I’m kinda stuck.
 *     ```
       div.center-blog
       	{
       	width:580px;
       	float:left;
       	margin-right:5px;
       	margin-top:3px;
       	}
   
       div.center-blog-newspage
       	{
       	width:240px;
       	float:left;
       	margin-right:5px;
       	margin-top:3px;
       	}
   
       div.post-title-newspage
       	{
       	margin:0px;
       	padding:4px;
       	padding-top:6px;
       	padding-left:8px;
       	height:16px;
       	background-image:url(images/title-header.gif);
       	}
   
       div.post-content-newspage
       	{
       	background-color:#FFFFFF;
       	margin:0px;
       	padding:5px;
       	text-align:left;
       	border-top:#000000 1px solid;
       	border-bottom:#000000 1px solid;
       	}
   
       div.post-meta-newspage
       	{
       	color:#ddd;
       	margin:0px;
       	padding:4px;
       	padding-left:8px;
       	height:14px;
       	margin-bottom:16px;
       	background-image:url(images/post-footer.gif);
       	}
       ```
   
 * And in the page-news.php:
 *     ```
       <div class="center-blog">
       <div class="center-blog-newspage">
           <?php query_posts('cat=7&showposts=9'); ?>
       	    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
       <div class="post-title-newspage">
       			<h2><a class="title" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
       </div>
       <div class="post-content-newspage">
       				<?php the_content(''); ?>
                		<?php edit_post_link('Rediger innlegget.', '<p>', '</p>'); ?>
       </div>
   
       <div class="post-meta-newspage">
       						<?php the_time('j. F, Y'); ?> <?php the_time('H:i'); ?> av <?php the_author(); ?> <?php wp_link_pages(array('before' => '<p><strong>Sider:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
       </div>
       	  <?php endwhile; endif; ?>
                <?php edit_post_link(' Rediger side.', '<p>', '</p>'); ?>
       </div>
       </div>
       ```
   
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [15 years, 8 months ago](https://wordpress.org/support/topic/2x3-rectangular-post-list-layout/#post-1635179)
 * try and move the `<div class="center-blog-newspage">` so that it is inside the
   loop, wrappping each post, as below:
 *     ```
       <div class="center-blog">
   
           <?php query_posts('cat=7&showposts=9'); ?>
       	    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
       <div class="center-blog-newspage">
       <div class="post-title-newspage">
       			<h2><a class="title" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
       </div>
       <div class="post-content-newspage">
       				<?php the_content(''); ?>
                		<?php edit_post_link('Rediger innlegget.', '<p>', '</p>'); ?>
       </div>
   
       <div class="post-meta-newspage">
       						<?php the_time('j. F, Y'); ?> <?php the_time('H:i'); ?> av <?php the_author(); ?> <?php wp_link_pages(array('before' => '<p><strong>Sider:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
       </div>
       </div>
       	  <?php endwhile; endif; ?>
                <?php edit_post_link(' Rediger side.', '<p>', '</p>'); ?>
   
       </div>
       ```
   
 *  Thread Starter [xrun](https://wordpress.org/support/users/xrun/)
 * (@xrun)
 * [15 years, 8 months ago](https://wordpress.org/support/topic/2x3-rectangular-post-list-layout/#post-1635185)
 * Yes, that did the trick. Thank you.

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

The topic ‘2×3 rectangular post list layout’ is closed to new replies.

## Tags

 * [layout](https://wordpress.org/support/topic-tag/layout/)

 * 6 replies
 * 2 participants
 * Last reply from: [xrun](https://wordpress.org/support/users/xrun/)
 * Last activity: [15 years, 8 months ago](https://wordpress.org/support/topic/2x3-rectangular-post-list-layout/#post-1635185)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics