SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry HELP - When Heights of floated elements differ = ugly layout

    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:

    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:

    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. #2
    SitePoint Guru Ruben K.'s Avatar
    Join Date
    Jun 2005
    Location
    Alkmaar, The Netherlands
    Posts
    693
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could solve this problem by adding 'container' divs around every two items:
    Very simple sketch of how that would be structured:

    Code:
    <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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  4. #4
    SitePoint Guru Ruben K.'s Avatar
    Join Date
    Jun 2005
    Location
    Alkmaar, The Netherlands
    Posts
    693
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    I've always preferred containers in this case as they make it clear that it's PAIRS

  5. #5
    SitePoint Member
    Join Date
    May 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <?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?

  6. #6
    SitePoint Guru Ruben K.'s Avatar
    Join Date
    Jun 2005
    Location
    Alkmaar, The Netherlands
    Posts
    693
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by davidsoi View Post
    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.

    <code removed>

    Further thoughts?
    Well:

    Code:
    <?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

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Ruben K. View Post
    I've always preferred containers in this case as they make it clear that it's PAIRS
    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


    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.

    Code:
    .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

  8. #8
    SitePoint Member
    Join Date
    May 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Ruben Really appreciate the help so far. Please check your inbox

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

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by davidsoi View Post
    @Ruben Really appreciate the help so far. Please check your inbox

    @Paul haven't you heard.... http://ie6funeral.com/
    Yes but ... About 2 or 3 years too soon.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •