Listing category posts horizontal (sideways)

bumping and duplicating topics is not allowed
be patient – someone will help if able

I’m sorry. I just really want this to be done. Do you know any theme that has this built in that I can get it from? Or how I can achieve this?

How good is your coding? It’s not so simple to just do this. You need to wrap your loop in a div class, make the div less than 1/3 the width of its container, and float them. If they are all smaller than 1/3 and you float them all left, they will line up beside each other. You would then use margins and padding to space the three divs properly, without the total of your divs and margins exceeding the width of the container.

If you don’t have much idea how to do that, you can brush up on your css. The layout you want has nothing to do with the above code really, and everything to do with css.

I’ve seen some of the magazine style themes out there have horizontal featured post type boxes, it just may take you some searching to find one. There are so many WP themes it can be hard to track the right one down

<tr>
<?php $recent = new WP_Query("cat=21&showposts=3"); while($recent->have_posts()) : $recent->the_post();?>

<?php if( get_post_meta($post->ID, "thumbnail", true) ): ?>

<font color="black"><?php the_time('F jS, Y') ?></font>

        <a href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" alt="<?php the_title(); ?>" width="70" border="1" style="float:left;margin:0px 10px 0px 0px;" /></a>

        <?php else: ?>

       <a href="<?php the_permalink() ?>" rel="bookmark"><img style="float:left;margin:0px 10px 0px 0px;"  src="<?php bloginfo('template_url'); ?>/images/thumbnail.png" alt="<?php the_title(); ?>" /></a>

        <?php endif; ?>

   <b><a href="<?php the_permalink() ?>" rel="bookmark">

       <h1><?php the_title(); ?></h1></b></a>

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; clear:both;"></div>

        <?php endwhile; ?>

</tr>

So Since this is the code that allows the thumbnail and the title, I create a new CSS div class. The container is 500px wide, I would only want each one to extend to 100px with a padding of about 50px each.

So I need to wrap the ENTIRE thing in a div class that says to make it 100px each? Then add another div class that says to pad it and align it left?

Hey tom,

try this once

<tr>
    <td bgcolor="white"><div class="style19" id="div">

      <div class="hpfeatured">

        <div class="mdl">

          <div class="h-wrap group">

            <h2 class="h-sub2 group"> <span>THE HOT SPOT </span> </h2>

          </div>

        </div>

        <br/>

<?php $recent = new WP_Query("cat=21&showposts=3"); ?>
<table width="100%" cellpadding="0" cellspacing="0">
 <tr>
<?php while($recent->have_posts()) : $recent->the_post();?>
<td width="33%">
<?php if( get_post_meta($post->ID, "thumbnail", true) ): ?>

<font color="black"><?php the_time('F jS, Y') ?></font>

        <a href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" alt="<?php the_title(); ?>" width="70" border="1" style="float:left;margin:0px 10px 0px 0px;" /></a>

        <?php else: ?>

       <a href="<?php the_permalink() ?>" rel="bookmark"><img style="float:left;margin:0px 10px 0px 0px;"  src="<?php bloginfo('template_url'); ?>/images/thumbnail.png" alt="<?php the_title(); ?>" /></a>

        <?php endif; ?>

   <b><a href="<?php the_permalink() ?>" rel="bookmark">

       <h1><?php the_title(); ?></h1></b></a>

        <div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; clear:both;"></div>
          </td>
        <?php endwhile; ?>
	</tr>
      </table>
      </div>
    </div></td>
  </tr>

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>"

well, my loop starts out like this.
So each post is wrapped in the post div ID. I would use css to manipulate the post div. Making it less than 1/3, floating it left, and applying the pargins and padding to it

I can see ytou are using table stuff now that I look closer….I’ll have to defer to someone else on that, I have no idea how to work with tables anymore…..

@chinmoy

I used that, it looks pretty good! Just kinda crazy like cingular raising the bars lol.

Is there a way to line up the bottom of the titles with eachother?

<tr>
    <td bgcolor="white"><div class="style19" id="div">

      <div class="hpfeatured">

        <div class="mdl">

          <div class="h-wrap group">

            <h2 class="h-sub2 group"> <span>THE HOT SPOT </span> </h2>

          </div>

        </div>

        <br/>

<?php $recent = new WP_Query("cat=21&showposts=3"); ?>
<table width="100%" cellpadding="0" cellspacing="0">
 <tr>
  <td>
<?php while($recent->have_posts()) : $recent->the_post();?>

  <table width="33%" cellpadding="0" cellspacing="0">
 <tr>
   <td>
<?php if( get_post_meta($post->ID, "thumbnail", true) ): ?>

<font color="black"><?php the_time('F jS, Y') ?></font>

        <a href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" alt="<?php the_title(); ?>" width="70" border="1" style="float:left;margin:0px 10px 0px 0px;" /></a>

        <?php else: ?>

       <a href="<?php the_permalink() ?>" rel="bookmark"><img style="float:left;margin:0px 10px 0px 0px;"  src="<?php bloginfo('template_url'); ?>/images/thumbnail.png" alt="<?php the_title(); ?>" /></a>

        <?php endif; ?>
     </td>
   </tr>
   <tr>
     <td>
   <b><a href="<?php the_permalink() ?>" rel="bookmark">

       <h1><?php the_title(); ?></h1></b></a>

        <div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; clear:both;"></div>
          </td>
    </tr>
   </table>
        <?php endwhile; ?>
	</td>
	</tr>
      </table>
      </div>
    </div></td>
  </tr>

Try once tom

just replace this <table width="33%" cellpadding="0" cellspacing="0"> with
<table width="33%" cellpadding="0" cellspacing="5">

Sorry!!! i have some mistake

<tr>
    <td bgcolor="white"><div class="style19" id="div">

      <div class="hpfeatured">

        <div class="mdl">

          <div class="h-wrap group">

            <h2 class="h-sub2 group"> <span>THE HOT SPOT </span> </h2>

          </div>

        </div>

        <br/>

<?php $recent = new WP_Query("cat=21&showposts=3"); ?>
<table width="100%" cellpadding="0" cellspacing="0">
 <tr>

<?php while($recent->have_posts()) : $recent->the_post();?>
<td width="33%">
  <table width="100%" cellpadding="0" cellspacing="5">
 <tr>
   <td>
<?php if( get_post_meta($post->ID, "thumbnail", true) ): ?>

<font color="black"><?php the_time('F jS, Y') ?></font>

        <a href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" alt="<?php the_title(); ?>" width="70" border="1" style="float:left;margin:0px 10px 0px 0px;" /></a>

        <?php else: ?>

       <a href="<?php the_permalink() ?>" rel="bookmark"><img style="float:left;margin:0px 10px 0px 0px;"  src="<?php bloginfo('template_url'); ?>/images/thumbnail.png" alt="<?php the_title(); ?>" /></a>

        <?php endif; ?>
     </td>
   </tr>
   <tr>
     <td>
   <b><a href="<?php the_permalink() ?>" rel="bookmark">

       <h1><?php the_title(); ?></h1></b></a>

        <div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; clear:both;"></div>
          </td>
    </tr>
   </table>
   </td>
        <?php endwhile; ?>

	</tr>
      </table>
      </div>
    </div></td>
  </tr>

Try this.

I added that, it separates it! Thank you! But is there a way to align the bottom of the titles together?

Or something in that manner?

And thank you so much chinmoy!

@tom

Image height is floating now. If you fix the image height, hope that your issue will be solved.

Thanks