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

Just write:

min-height: xxx;
overflow: hidden;

then div will automatically take the height of the content.


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>

Just write "min-height: XXX;" And "overflow: hidden;" & you will be out of this problem Like this

min-height: 100px;
overflow: hidden;

Tags:

Html

Css

Recent Posts