Make div's height expand with its content

Question

Make div's height expand with its content

I have these nested divs and I need the main container to expand (in height) to accommodate the DIVs inside

    <!-- head -->

    ...

    <!-- /head -->



    <body class="main">

      <div id="container">

        <div id="header">

          <!--series of divs in here, graphic banner etc. -->

        </div>



    <div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs -->

      <div id="items_list" class="items_list ui-sortable">

        <div id="item_35" class="item_details">

        </div>

        <div id="item_36" class="item_details">

        </div>        

        <div id="item_37" class="item_details">

        </div>

        <!-- this list of DIVs "item_xx" goes on for a while

             each one representing a photo with name, caption etcetc -->

      </div>

    </div>

    <br class="clear"/>



    <div id="footer">

    </div>

  </body>

</html>

CSS is this:

* {

    padding: 0;

    margin: 0;

}



.main {

    font: 100% Verdana, Arial, Helvetica, sans-serif;

    background: #4c5462;

    margin: 0; 

    padding: 0;

    text-align: center; 

    color: #000000;

}

.main #container {

    height: auto;

    width: 46em;

    background: #4c5462;

    margin: 0 auto; 

    border: 0px solid #000000;

    text-align: left;       

}



.main #main_content {

    padding: 5px;

    margin: 0px;

}

#items_list {

    width: 400px;

    float: left;

}



.items_list {

    width: 400px;

    float: left;

}

.item_details {

    margin-top: 3px;

    margin-bottom: 3px;

    padding: 3px;

    float: left;

    border-bottom: 0.5px solid blue;

}

The problem I have is that #main_content doesn't stretch to accommodate all the inner divs, with the result that they keep going against the background.

How can I solve this problem considering the above scenario?

height html css

3 years ago by Amit8z4mc

3 Answers

Login / Signup to Answer the Question.

Login Signup

**rahul07** · Answer 1 · 2021-07-22T11:53:38

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>

**RoliMishra** · Answer 2 · 2021-07-23T12:47:02

RoliMishra

Try this:

overflow: auto;

It worked for my problem..

3 years ago

**pankajshivnani123** · Answer 3 · 2021-07-28T12:21:45

pankajshivnani123

add the following:

overflow:hidden;

height:1%;

to your main div. Eliminates the need for the extra <br /> for the clear.

3 years ago

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

Make div's height expand with its content

3 Answers

Login / Signup to Answer the Question.