Make Div's Height Expand with Its Content

make div's height expand with its content

You need to force a clear:both before the #main_content div is closed. I would probably move the <br class="clear" />; into the #main_content div and set the CSS to be:

.clear { clear: both; }

Update: This question still gets a fair amount of traffic, so I wanted to update the answer with a modern alternative using a new layout mode in CSS3 called Flexible boxes or Flexbox:

body {  margin: 0;}
.flex-container {  display: flex;  flex-direction: column;  min-height: 100vh;}
header {  background-color: #3F51B5;  color: #fff;}
section.content {  flex: 1;}
footer {  background-color: #FFC107;  color: #333;}

<div class="flex-container">  <header>    <h1>     Header       </h1>  </header>
  <section class="content">    Content  </section>
  <footer>    <h4>      Footer    </h4>  </footer></div>

Div height 100% and expands to fit content

Here is what you should do in the CSS style, on the main div

display: block;
overflow: auto;

And do not touch height

How to make div expand when its content?

Use min-height instead of height.

How can I expand floated child div's height to parent's height?

For the parent element, add the following properties:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

then for .child-right these:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Find more detailed results with CSS examples here and more information about equal height columns here.

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

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>

Make Div's Height Expand with Its Content