WordPress.org

1. ksaad
   Member
   Posted 3 years ago #

   Hello, to make this really simple, I made a diagram to show my idea, is it possible to make?

   http://img132.imageshack.us/img132/7501/untitledzs3.png

2. ZMAng
   Member
   Posted 3 years ago #

   On your post div, apply a float:left and define the appropriate width (half of the container's width since you want two boxes) and height. The float:left will make the boxes move side by side to get the layout you want.

   P.S.: Your vertical listing and your grid listing seems contradictory unless your vertical listing has been set to display chronologically, rather than the default reverse chrono order.

3. ksaad
   Member
   Posted 3 years ago #

   I think I got your idea. A sample code would be nice?

4. ZMAng
   Member
   Posted 3 years ago #

   Let's say this is how your posts are formatted in your Main Index Template:
   <?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">

   <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
   </div>
   <?php endwhile;else; ?>'

   So, each post that comes out will be wrapped by a div of class "post".

   Therefore, in your stylesheet, add these to the post div:
.post {
   float: left;
   width: 200px;
   height: 100px;
   }'
   assuming that your total container (page) width is 400px.

   This might or might not be sufficient as it depends from theme to theme.

5. ksaad
   Member
   Posted 3 years ago #

   Thank you. Much appreciated.

Topic Closed

This topic has been closed to new replies.