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:
padding: 12px 0 12px 0;
margin: 0 18px 0 0;
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 very much appreciate the help.
Below is a snippet of my index.php code:
<?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(); ?>
<?php endwhile; ?>