When Heights of floated elements differ = ugly layout

[davidsoi]

This problem has been bugging me for the past couple of days. Hopefully someone here can help me out!

If you take a look at the image below, my problem should be pretty clear!



As you can see I have a series of divs (that have different heights) and I want them to float side by side, the problem is, the only way they will float side by side is if I assign a specific height to .post:

.post{
padding: 12px 0 12px 0;
margin: 0 18px 0 0;
width: 382px;

height: 200px;

float: left;
border-top: 1px solid #ccc;
}

Whilst that works perfectly fine, it isn't what I want. What I want is for the divs to float side by side, WHERE the content defines the height of the div automatically.

Any ideas on how I would solve this problem? I'd definitely appreciate the help.

Below is a snippet of my index.php code just in case:

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

   <div class="post" id="post-<?php the_ID(); ?>">
      <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
         <p class="postcat"><span class="metadate"><?php the_time('F jS, Y') ?></span> — <?php the_category(', ') ?></p>

            <div class="entry"><?php the_excerpt(); ?>

	    </div>	

   </div>
	
	<?php endwhile; ?>

Cheers
David

[azoomer]

Hi I just fell over this article. Maybe you can use it. I saw it implemented in a wp childtheme in the functions.php (in case you are using wordpress)

[zip222]

you to clear every other post. you could use a counter that increments by one, and if the current value is an odd number then you add a special class to the div - that class would need to be set to clear: both;

Take a look at the source here:
http://jasmardesign.com/samples/test.html