an images in overflow issue (CSS) - html

Question

i'm trying to create a personal blog for myself and i'm having an issue of using overflow.
i have an internal div as home page that is designed to contain text and images for reviewing. the button "read more" is used to display the whole paragraph and images in the new page.
<div id="wrapper">
<!------------------BODY CONTENT OF THE WEB--------------------------------------->
<div id="bodyWeb">
<div id="main_content">
<!--CONTAINER FOR EACH ARTICLE-->
<?php
require 'connect_to_sql.php';
$sql = mysql_query("SELECT * FROM post ORDER BY post_date DESC LIMIT 5 ") or die (mysql_error());
$dataCount = mysql_num_rows($sql);
if ($dataCount > 0) {
while ($row = mysql_fetch_array($sql)) {
$title = $row['title'];
$content = $row['content'];
$post_date = date ('M jS, Y', strtotime($row['post_date']));
print '<div class="container">';
print '<div class="blog_container">';
print '<h1>' .$title.'</h1>';
print '<p class="date">'.$post_date.'</p>';
print $content;
print '</div>'; //BLOG CONTAINER
print '<div class="read_more">read more</div>';
print '</div>'; //CONTAINER
}
}
?>
</div> <!--MAIN CONTENT-->
</div> <!--bodyWeb--></div> <!--WRAPPER -->
and this is CSS file
#wrapper #bodyWeb #main_content .blog_container {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:18px;
float:left;
width:610px;
max-height:1200px;
text-align:justify;
overflow:hidden;
}
since i can't predict the height of every post that will be created later and the height is won't be the same for sure, so i just set the max-height = 1200px. but all i have is an image that is cut at the bottom of the div. is there a way do to get a neat div without change the max-height
any help would be appreciated.
thanks
there is another example here to understanding the issue

Answer 1

if the content is the short version of the article
you can leave height: auto;, the container will fit the height of content.
if the content is the article itself and you just want to hide the rest part of it, you may consider to do a shorten version or to add an anchor point and then let js to do the trick.
something like
(inside loop)
var post_head =$(head).offset().top,
anchor = $(anchor).offset().top,
height_of_content = post_head - anchor;
$(content).css('height', height_of_content);