Excerpt Problems

Question

On a theme I'm working on I want a div which expands to 100% height of the outer div (which I will put around the thumbnail). The purpose of this is to move text further to the right to be aligned as a block paragraph and not wrap around the thumbnail. I would use padding but I want the excerpt's text to be aligned to the left when there isn't an image. I have tried this a couple times to no avail. Suggestions?

Take a look: http://themeforward.com/demo2/page/2/

If I use an else statement ( http://codex.wordpress.org/Function_Reference/has_post_thumbnail ) I would need to add the entire excerpt in it and that seems sloppy.

My code:

<?php get_header(); ?>

<div id="container">
<div id="main_index">
<div class="main_adjust">

<!-- Grab posts -->
<?php while (have_posts()) : the_post(); ?>

<!-- Begin excerpt wrap -->
<div class="excerpt_wrap">
<div class="excerpt_inside">
    <a href="<?php the_permalink() ?>">
    <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thmb-index' ); } ?>
    </a>
    <span class="index_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
    <span class="sub-title">By <?php the_author_posts_link( ); ?> <span class="sub-title-divider">|</span> <?php the_time('F j, Y'); ?> <span class="sub-title-divider">|</span> <a href="#commentlist"><?php comments_number( 'No comments', 'One comment', '% comments' ); ?></a></span>
    <?php the_excerpt(); ?>

<!-- End excerpt wrap -->
</div>
</div>

<?php endwhile; ?>

<!-- Next/Previous entries -->
<div class="mp_archive">
<div id="more_posts">
<div class="oe"><?php next_posts_link('&laquo; Older') ?></div><div class="re"><?php previous_posts_link ('Newer &raquo;') ?></div>
</div>
</div>

</div>
</div>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>

Answer 1

Hopefully I'm understanding what you want correctly. I think you are going to need to wrap the content itself in a div called something like excerpt_content and make that an inline block that's aligned to the top. Then you can use the has_post_thumbnail() as a conditional to assign it another class to limit the width so it appears next to the post thumbnail instead of under it. Not sure if this is the most elegant way to do it, but it works. Note that if you want this to work in IE7 you'll have to use float instead.

So, the CSS:

.excerpt_content.with-thumbnail {
  display: inline-block;
  width: 416px;
  vertical-align: top;
}

You .sub-title class shouldn't need any padding anymore. And your code would look more like this:

<?php get_header(); ?>

<div id="container">
<div id="main_index">
<div class="main_adjust">

<!-- Grab posts -->
<?php while (have_posts()) : the_post(); ?>

<!-- Begin excerpt wrap -->
<div class="excerpt_wrap">
<div class="excerpt_inside">
    <?php if ( has_post_thumbnail() ) { ?>     
    <a href="<?php the_permalink() ?>">
    <?php the_post_thumbnail( 'thmb-index' ); ?>
    </a>
    <?php } ?>
    <div class="excerpt_content<?php if ( has_post_thumbnail() ) echo ' with-thumbnail'; ?>">
    <span class="index_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
    <span class="sub-title">By <?php the_author_posts_link( ); ?> <span class="sub-title-divider">|</span> <?php the_time('F j, Y'); ?> <span class="sub-title-divider">|</span> <a href="#commentlist"><?php comments_number( 'No comments', 'One comment', '% comments' ); ?></a></span>
    <?php the_excerpt(); ?>
    </div><!-- .excerpt_content -->

<!-- End excerpt wrap -->
</div>
</div>

<?php endwhile; ?>

<!-- Next/Previous entries -->
<div class="mp_archive">
<div id="more_posts">
<div class="oe"><?php next_posts_link('&laquo; Older') ?></div><div class="re"><?php previous_posts_link ('Newer &raquo;') ?></div>
</div>
</div>

</div>
</div>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>