HELP - When Heights of floated elements differ = ugly layout

HTML & CSS
1

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

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(); ?>

	    </div>	

   </div>
	
	<?php endwhile; ?>
2

@Ruben Really appreciate the help so far. Please check your inbox :slight_smile:

@Paul haven’t you heard… http://ie6funeral.com/ :wink:
Thank you for the help sir. I’ll let you know how everything turns out :slight_smile:

3

You could solve this problem by adding ‘container’ divs around every two items:
Very simple sketch of how that would be structured:


<style>
.container{
    clear: left;
}

.post{
   float: left;
   width: 250px;
}
</style>
<div class="container">
    <div class="post"></div>
    <div class="post"></div>
</div>
<div class="container">
    <div class="post"></div>
    <div class="post"></div>
</div>
<div class="container">
    <div class="post"></div>
    <div class="post"></div>
</div>

Each container div would clear the floats, causing the desired effect :slight_smile:

4

Hi,

As mentioned above just clear each pair of floats before you start the next pair. Either with a parent container as mentioned above or even an empty clearer div underneath each pair of floats.

5

Yes but in your case the container won’t encompass the float (because it doesn’t contain them) and you can lose the bottom margins on floated elements in IE6 unless you use a hard clearer.

However I agree and wrapping the divs is usually the best option :slight_smile:

Now I’m not an expert on PHP but if you take a look at my Wordpress Index.php below you’ll see that only one “.post” if defined as opposed to two “posts”, so if I clear “.post” I’ll end up clearing all 6 posts that are displayed on the front page.

I’m assuming that you could simply change the php to the format that was required but that would be a php question for the php forum.

You could change .post from being floated to display:inline-block instead although it may be a little awkward.


.post{
float:none;
display:-moz-inline-box;
display:inline-block;
}

* html .post {display:inline}/* ie6 fix*/
*+html .post{display:inline}/* ie7 fix*/

You may need to tweak your code a bit once that is in place but try it and see.

That will change the element from being floated to being an inline block element and it will start on a new line when it wraps.

Edit:

I see Ruben was quicker than me with the php answer :slight_smile:

6

Well:


<?php get_header(); ?>

<div id="container">
        <?php $iterator = 0; ?>
	<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
        <?php if( $iterator == 1 ){ ?><div class="container"><?php } ?>
		<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 if( $iterator == 1 ){ ?></div><?php } ?>
	<?php $iterator = ( $iterator == 1 ) ? 0 : 1; ?>
	<?php endwhile; ?>

	<?php else : ?>

	<div class="post">
		<h2><?php _e('Not Found'); ?></h2>
	</div>

	<?php endif; ?>

</div><!--End Container-->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

</body>
</html>

What I’ve done here is place <div class=“container”></div> around the <div class=“post”></div> every two posts, basically seperating them in pairs.

That should do the trick! Look a bit deeper into PHP if you want to be able to do things like this yourself :slight_smile:

7

I appreciate the responses guys but it isn’t that simple:

Now I’m not an expert on PHP but if you take a look at my Wordpress Index.php below you’ll see that only one “.post” if defined as opposed to two “posts”, so if I clear “.post” I’ll end up clearing all 6 posts that are displayed on the front page.


<?php get_header(); ?>

<div id="container">

	<?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; ?>

	<?php else : ?>

	<div class="post">
		<h2><?php _e('Not Found'); ?></h2>
	</div>

	<?php endif; ?>

</div><!--End Container-->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

</body>
</html>

Further thoughts?

8

I’ve always preferred containers in this case as they make it clear that it’s PAIRS :slight_smile:

9

Yes but … :slight_smile: About 2 or 3 years too soon.