How to auto adjust the <div> height according to content in it?

Issue

I have a <div> which needs to be auto adjusted according to the content in it. How can I do this? Right now my content is coming out of the <div>

The class I have used for the div is as follows

box-centerside  {
background:url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;
float:left;
height:100px;
width:260px;
}

Solution

Try with the following mark-up instead of directly specifying height:

.box-centerside {
  background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;
  float: left;
  min-height: 100px;
  width: 260px;
}
<div class="box-centerside">
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
  This is sample content<br>
</div>

Answered By – Barrie Reader

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.