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)