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!

http://img541.imageshack.us/img541/4884/floats.jpg

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 (http://www.cssnewbie.com/example/equal-heights/). Maybe you can use it. I saw it implemented in a wp childtheme (http://themeshaper.com/thematic-power-blog-theme/) 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