Skip navigation
DerricksArk
Currently Being Moderated

Properties that make DIV automatically hold content

May 25, 2013 1:45 AM

What properties cause a DIV to automatically expand or shrink to hold all content inside the DIV? I would have thought that height: auto would have done the trick but this isn't working for me.

 
Replies
  • Currently Being Moderated
    May 25, 2013 5:41 AM   in reply to DerricksArk

    Expanding downward with the amount of content is the default behavior of DIV's.

     

    If your CSS was this (no height attrtibute)

     

    #foo  {

              width: 400px;

              margin-left: auto;

              margin-right: auto;

    }

     

    with this HTML

     

    <div id="foo"> content </div>

     

    Your content would be 400 pixels wide and centered

     
    |
    Mark as:
  • Currently Being Moderated
    May 25, 2013 6:50 AM   in reply to DerricksArk

    The height property is set to auto by default. Hence there is no need to touch the height property.

     

    If the div contains inline elements (like IMG) or floating elements, there is a chance that not all of the content will show within the container. The best way to overcome this is to create the following style rules

    .clearfix {

      *zoom: 1;

    }

    .clearfix:before,

    .clearfix:after {

      display: table;

      line-height: 0;

      content: "";

    }

    .clearfix:after {

      clear: both;

    }

    and give the div a class of CLEARFIX as in

    <div class="myDiv clearfix">

    where myDiv is the class that you have allocated the div.

     
    |
    Mark as:
  • Currently Being Moderated
    May 25, 2013 11:21 AM   in reply to DerricksArk

    Div height is auto determined by the content inside it.  Although floats sometimes cause  margins to collapse.  To prevent this, I use overflow:hidden on any parent div that contains floats.  Borrowing from Ken's answer above:

     

     

    #foo  {

              width: 400px;

              overflow:hidden;  /**float containment**/

    }

     

     

    <div id="foo">

         content goes here

    </div>

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points