Issue with height for outside container/content images

Question

Hi I'm modifying a Wordpress theme and I'm having some trouble positioning the outside container images that provide the border for the middle section of content. The problem is that the background images are not extending with the content, instead it stops at the bottom of the browser screen. The site is located here: http://www.richmindonline.com/test

I've never structured background images in this way before, so I apologize for my being naive to this issue.

Here's the CSS id's for the background image structure:

 #main {border:1px solid blue; width:900px; display:block; margin:0px auto;}

#container {
        width: 600px;
    float:left;
    border:0px solid red;
}

#content-before {
    border:0px solid yellow;
    content:"";
    position:absolute;
    display:block;
    top:150px;
    left:185px;
    bottom:0px;
    width:20px; 
    height:auto;
    background:url('/test/wp-content/themes/basic/assets/images/main-boxed-light.png') 0px 0px repeat-y;

}


#content {
width:590px;
    border:0px solid green;
    }


#primary {
float:right;
overflow: hidden;
width: 250px;
    border:1px solid brown;
}


#content-after {
    border:0px solid yellow;
    content:"";
    float:left;
    position:absolute;
    display:block;
    top:150px;
    left:1145px;
    bottom:0px; 
    width:20px; 
    height:auto;
    background:url('/test/wp-content/themes/basic/assets/images/main-boxed-light.png') -20px 0px repeat-y;
}

#footer {
clear: both;
width: 100%;
}

Here is my index.php HTML div structure:

<?php get_header(); ?>

<div id="container">

  <div id="content-before"></div><!-- #content-before-->
         <div id="content">




             <?php /* Top post navigation */ ?>
             <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
                <div id="nav-above" class="navigation">
                   <div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">&laquo;</span> Older posts', 'your-theme' )) ?></div>
                   <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">&raquo;</span>', 'your-theme' )) ?></div>
                </div><!-- #nav-above --><?php } ?>




             <?php /* The Loop — with comments! */ ?>
             <?php while ( have_posts() ) : the_post() ?>
             <?php /* Create a div with a unique ID thanks to the_ID() and semantic classes with post_class() */ ?>
                <div id="post-<?php the_ID(); ?>" 
                    <?php post_class(); ?>>
                    <?php /* an h2 title */ ?>
                <h2 class="entry-title">
                    <a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a>
                </h2> 

                     <?php /* Microformatted, translatable post meta */ ?>
                <div class="entry-meta">
                    <span class="meta-prep meta-prep-author"><?php _e('By ', 'your-theme'); ?></span>
                    <span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'your-theme' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
                    <span class="meta-sep"> | </span>
                    <span class="meta-prep meta-prep-entry-date">
                          <?php _e('Published ', 'your-theme'); ?></span>
                    <span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>
                          <?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>
                </div><!-- .entry-meta --> 

                          <?php /* The entry content */ ?>

                                 <div class="entry-content">
                                    <?php the_content( __( 'Continue reading <span class="meta-nav">&raquo;</span>', 'your-theme' )  ); ?>
                                    <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&after=</div>');?>                                    </div><!-- .entry-content --> 

                                    <?php /* Microformatted category and tag links along with a comments link */ ?>

                <div class="entry-utility">
                    <span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links">
                        <?php _e( 'Posted in ', 'your-theme' ); ?></span><?php echo get_the_category_list(', '); ?>
                    </span>                        

                    <span class="meta-sep"> | </span>

                        <?php the_tags( '<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>
                    <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span>                

                        <?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?>
                </div><!-- #entry-utility -->


            </div><!-- #post-<?php the_ID(); ?> --> <?php /* Close up the post div and then end the loop with endwhile */ ?>
   <?php endwhile; ?>

         <?php /* Bottom post navigation */ ?>
         <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
            <div id="nav-below" class="navigation">
                <div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">&laquo;</span> Older posts', 'your-theme' )) ?></div>
                <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">&raquo;</span>', 'your-theme' )) ?></div>
            </div><!-- #nav-below --><?php } ?>

         </div><!-- #content --> 

      <div id="content-after"></div>

    </div><!-- #container -->



     <div id="primary" class="widget-area">
    </div><!-- #primary .widget-area -->



<?php get_sidebar(); ?>
<div style="clear:both"></div>


<?php get_footer(); ?>

Answer 1

The min-height value of 100% that you are using to try to stretch the outer columns to the full length of the page isn't working because it returns the browser window height.

Perhaps posting the code for your template file so we can easily see your div structure would help in providing a resolution.