Title: Need Float Code for Side By Side Posts
Last modified: August 20, 2016

---

# Need Float Code for Side By Side Posts

 *  [thenaturalone30](https://wordpress.org/support/users/thenaturalone30/)
 * (@thenaturalone30)
 * [14 years, 12 months ago](https://wordpress.org/support/topic/need-float-code-for-side-by-side-posts/)
 * I am looking to create pages that will hold 3 X 3 posts.
 * The posts should look like this:
 * Post Post Post
    Post Post Post Post Post Post
 * I understand that I need to put some float code in my CSS.
    Can someone provide
   me with the code I need and explain where I need to put it??

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

 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [14 years, 12 months ago](https://wordpress.org/support/topic/need-float-code-for-side-by-side-posts/#post-2091397)
 * one of many possibilities:
    [http://www.transformationpowertools.com/wordpress/easy-coding-for-wordpress-posts-in-3-columns](http://www.transformationpowertools.com/wordpress/easy-coding-for-wordpress-posts-in-3-columns)
 *  Thread Starter [thenaturalone30](https://wordpress.org/support/users/thenaturalone30/)
 * (@thenaturalone30)
 * [14 years, 12 months ago](https://wordpress.org/support/topic/need-float-code-for-side-by-side-posts/#post-2091436)
 * Thanks so much!
 * I hate to sound like an idiot, but where do I put the two sets of codes?
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [14 years, 12 months ago](https://wordpress.org/support/topic/need-float-code-for-side-by-side-posts/#post-2091467)
 * > I am looking to create pages that will hold 3 X 3 posts.
 * you probably need to create a page template:
    [http://codex.wordpress.org/Pages#Page_Templates](http://codex.wordpress.org/Pages#Page_Templates)
 * this could in its easiest form be a copy of index.php or single.php (depending
   on your theme) where you add the neccessary code at the top, and replace the 
   existing loop with the first part of the code.
 * the second part (the styles) should be added to style.css of your theme.
    you
   will probably need to add more details to the styles.
 * it will be easier to suggest more details when knowing which theme you are working
   with.
 * a link to your site might also help.
 *  Thread Starter [thenaturalone30](https://wordpress.org/support/users/thenaturalone30/)
 * (@thenaturalone30)
 * [14 years, 12 months ago](https://wordpress.org/support/topic/need-float-code-for-side-by-side-posts/#post-2091470)
 * My site is [http://www.beautyblossom.biz](http://www.beautyblossom.biz).
 * I’m using Manolya template. I have made 3 posts to use as testers which you will
   see on the page.
 * Here’s the Loop code of the index.php:
 * _[next time, please use the [pastebin ](http://pastebin.com/)for [any code longer than 10 lines. for any direct posted code](http://codex.wordpress.org/Forum_Welcome),
   please mark the code using the ‘code’ button.]_
 *     ```
       <div id="content">	
   
       <?php if(is_home()) { include (TEMPLATEPATH . '/featured.php'); } ?>
       <?php if (have_posts()) : ?>	
   
       <?php while (have_posts()) : the_post(); ?>
   
       <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
   
       <h2 class="title"><a>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
       <?php the_title(); ?></a></h2>
   
       <div class="postdate"> <?php the_time('F jS, Y') ?>
       <?php if (current_user_can('edit_post', $post->ID)) { ?> <img src="<?php bloginfo('template_url'); ?>/images/edit.png" />
       <?php edit_post_link('Edit', '', ''); } ?></div>
                                   <
       div class="entry">
   
       <?php if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) { the_post_thumbnail(array(200,160), array('class' => 'alignleft post_thumbnail')); } ?>
   
       <?php the_content(''); ?>
   
       <div class="readmorecontent">
       <a>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">Read More »</a>
   
       </div>
   
       </div>
   
       </div><!--/post-<?php the_ID(); ?>-->
   
       <?php endwhile; ?>
       ```
   
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [14 years, 12 months ago](https://wordpress.org/support/topic/need-float-code-for-side-by-side-posts/#post-2091476)
 * obviously, if you edit index.php, this might effect other pages as well such 
   as archives, etc.
 * try and edit this section:
 *     ```
       <?php if (have_posts()) : ?> 
   
       <?php while (have_posts()) : the_post(); ?>
   
       <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
       ```
   
 * using the idea of my link, change it to:
 *     ```
       <?php if (have_posts()) : ?>
       <?php $count = 0; ?>
       <?php while (have_posts()) : the_post(); ?>
       <?php $first = ($count%3 == 0) ? 'first' : ''; $count++; ?>
       <div <?php post_class($first) ?> id="post-<?php the_ID(); ?>">
       ```
   
 * and add to style.css (example only, needs to be fine-tuned):
 *     ```
       .post.first { float:left; clear:left; width: 30%; margin-left: 0; }
       .post float:left; width: 30%; margin-left: 3%; }
       ```
   
 * [http://codex.wordpress.org/Function_Reference/post_class](http://codex.wordpress.org/Function_Reference/post_class)
   
   [http://php.net/manual/en/language.operators.comparison.php](http://php.net/manual/en/language.operators.comparison.php)

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

The topic ‘Need Float Code for Side By Side Posts’ is closed to new replies.

## Tags

 * [div](https://wordpress.org/support/topic-tag/div/)
 * [float](https://wordpress.org/support/topic-tag/float/)
 * [posts](https://wordpress.org/support/topic-tag/posts/)

 * 5 replies
 * 2 participants
 * Last reply from: [Michael](https://wordpress.org/support/users/alchymyth/)
 * Last activity: [14 years, 12 months ago](https://wordpress.org/support/topic/need-float-code-for-side-by-side-posts/#post-2091476)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics