I am currently working on setting up a personal blog for myself, but I have encountered an issue with the overflow property. On my home page, I have a div that contains text and images for reviews. When users click on the "read more" button, the full paragraph and images are displayed on a 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"><a href="#">read more</a></div>';
print '</div>'; //CONTAINER
}
}
?>
</div> <!--MAIN CONTENT-->
</div> <!--bodyWeb--></div> <!--WRAPPER -->
This is my 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;
}
Unfortunately, I cannot predict the height of every post that will be created in the future, and the heights will vary. So, I have set the max-height = 1200px. However, this cuts off images at the bottom of the div. Is there a way to ensure a clean div without changing the max-height?
Any assistance on resolving this issue would be greatly appreciated. Thank you!
You can also see another example here to better understand the problem.