Floating divs with different heights = butt 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! (Open in new tab to see cut-off portion)

[img]http://img541.imageshack.us/img541/4884/floats.jpg[/img]

As you can see I have a series of divs (that have different heights determined by the excerpt length) and I want them to cleanly 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:

Code:

.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 very much appreciate the help :)

Below is a snippet of my index.php code just in case you want to see it:

Code:

” title=”“>

—

Cheers
David

[TheDoc]

Ah yes, you’ll want to do something like this:

Code:

// Set Counter to 1, First Post
$counter = 1;
if (have_posts()) :
while (have_posts()) :
$counter = $counter + 1;
the_post();
the_content();
if(2 == $counter)
{
echo ‘

‘;
}
endwhile;
endif;

[davidsoi]

@TheDoc Really appreciate the response. I can see how that would work but the problem is, I’m not sure how to add what you’ve provided above to my existing index.php – I’m not sure what to take away from the existing code for it to work without any errors. If you’d be so kind as to sort this out for me (the entire index.php code is below) that would be very much appreciated because I’m no expert when it comes to php!

Thanks again
David

Code:

” title=”“>

—

[TheDoc]

Hey David,

Sorry I just don’t have the time at this exact moment – hopefully somebody else can put it together for you!

[Author]

Posts