how to change height of div to covered the text area (CSS)

Question

Orginal CSS Code http://www.faressoft.org/BlueCristalTheme/postView.php

Result should be

Answer 1

You want the clearfix hack.

Add this to your stylesheet:

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

Then, add class="clearfix" to your div (or clearfix to your existing div class), and it should clear that text properly.

Answer 2

few things going on here:

• your comment box div has a fixed height of 100px
• all the elements inside this div are absolutely positioned, which takes them out of the normal flow of the document, which results in the containing comment box div not able to wrap / stretch to fit around the children
• use floats or just remove the positioning for the larger content which looks like the second <p>. use margins to position this <p>, see below

I was able to fix the problem by changing your CSS as follows:

#comments .commentBox { /* style.css line 483 */
background-color:#DCDCDC;
/*height:100px; --removed this */
min-height:100px;
position:relative;
}

#comments .commentBox .comment-content { /* style.css line 523 */
color:#676767;
font-size:0.91em;
font-weight:bold;
line-height:24px;
margin:52px 92px 0 0; /* -- added this */
/* -- removed these
position:absolute;
right:95px;
top:52px;
width:570px;
*/
}