Advanced Search

Results 1 to 3 of 3

Thread: When Heights of floated elements differ = ugly layout

  1. #1
    Join Date
    May 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation 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 definitely appreciate the help.

    Below is a snippet of my index.php code just in case:

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

    Cheers
    David

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Hi I just fell over this article. Maybe you can use it. I saw it implemented in a wp childtheme in the functions.php (in case you are using wordpress)
    Last edited by azoomer; 05-27-2010 at 07:09 PM. Reason: spelling

  3. #3
    Join Date
    May 2010
    Posts
    13
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Default

    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
    Last edited by zip222; 05-27-2010 at 06:23 PM. Reason: added more detail

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
  •