How to make a parent div stretch according to it's child's content?

Question

I know that this question has been asked many times but believe me I've tried all the solutions but none seem to work . I'll admit, I just started web-design a few weeks ago and I'm helping a friend with a site. The site is www.buntufang.com

This is the problem I have (I'd prefer a CSS HTML solution as I have no knowledge of javascript(and I'm using Firefox 29 with Firebug)):

The homepage has article posts. Withing the posts is a featured article image, the title and the description which shows when you hover above it. The problem I have is that when in responsive mode (decreased browser width or like on a tablet device), the content overflows. I'd like to design it such that when the title or content is long and overflows, the div containing the content stretches to accomadate the overflow

HTML:

<!-- POST ENTRY START -->
<div id="post-entry">
<section class="post-entry-inner">

<?php
if ( ( is_home() || is_page_template('template-blog.php') ) && get_theme_option('slider_on') == 'Enable' ) :
if ( $paged >= 2 || $page >= 2 ) { } else { ?>
<?php get_template_part( 'lib/sliders/gallery-slider' ); ?>
<?php }
endif; ?>

<?php $oddpost = 'alt-post'; $postcount = 1; if (have_posts()) : while (have_posts()) :  the_post();
$thepostlink = '<a href="'. get_permalink() . '" title="' . get_the_title() . '">';
?>

<?php do_action( 'bp_before_blog_post' ) ?>

<!-- POST START -->
<article <?php post_class('home-post ' . $oddpost); ?> id="post-<?php the_ID(); ?>">

<?php echo get_featured_post_image("<div class='post-thumb in-archive'>".$thepostlink, "</a></div>", 350, 200, "alignleft", "medium", 'image-'.get_the_ID() ,get_the_title(), false); ?>

<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
     <div class="article-blk">
        <?php get_template_part( 'lib/templates/post-meta-home' ); ?>
        <div class="sharebox-wrap">
        <?php get_template_part( 'lib/templates/share-box' ); ?>
        </div>
        <h1 class="post-title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
     </div>
</div>
<div class="popup_information">
     <!-- The thing or things you want to popup go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
   <!--  <div class="post-content"> <?php echo get_custom_the_excerpt(30); ?> </div>--> 
     <a href="<?php the_permalink(); ?>"><div class="post-content"><?php echo get_custom_the_excerpt(40); ?> </div></a>
</div>
</div>

<span class="post-category single-post-category">
<?php echo get_singular_cat(); ?>
</span>


</article>
<!-- POST END -->

The article container is the one I need to stretch. And I need it to stretch according to it's child divs' change in content. To elaborate, div classes "post-title" and "post-content" are the ones with variable divs. When the content in them increases, I want their parent div to stretch to accommodate them. And them that parents div stretches to accommodate it and so until the uppermost parent div which is the article container also stretches to accommodate the changes.

The reason I need it to be like this is so that content overflow doesn't occur in reduced browser width, like on tablets.

Please visit the site with firebug to see the CSS if you need to. www.buntufang.com. The frontpage article posts. Reduce the browser size(width) to see what I mean.

I've tried many solutions like placing overflow:hidden and height:auto in the CSS of the child divs which are all mostly float:left. This accomplishes dragging down all the aprent divs except the topmost one (article div : ) which has stubbornly refused to stretch. I also tried using a clearfix but I'm not sure I did it right.

Anyways, that's my problem. I'd appreciate any answer or suggestion.

Answer 1

This is a solution that can work. You can play around with it but this gets the job done for me when I want cells to have the same height as eachother even with variable heights and contents.

Take a look : fiddle

CSS

div.content {
    display: table;
}
div.box {
    width: 300px;
    display: table-cell;
    vertical-align: top;
    background: #ccc;
    margin: 10px
}

One last change. You can use the Flex instead of table. http://jsfiddle.net/cornelas/5rRhp/2/

div.content {
    display: flex;
}
div.box {
    width: 300px;
    vertical-align: top;
    background: #ccc;
    margin: 10px
}