Assignment009c5 - Minimum Height versus Height

#wrapper div

Sometimes we want a minimum height for our elements or page, especially when an element has little or no content. In those instances we can use the CSS min-height property. The min-height property assigns a minimum height to your element and allows it to grow in height as needed. Remember, min-height allows an element to grow as needed. Using the regular height property is a fixed height. If you place too much content in a fixed height element, you will encounter overflow.

In the following example, we have two divs with the same height of 400px. One has the min-height and the other just the height property.

Here's the min-height element:

          
          #divname
            {
            min-height:400px;
            }
          
        

Type the word lorem500 to dummy text, and place them the text inside each of the following divs. You will see the #topcolumn div grow to fit the text and the #bottomcolumn div overflow (the text will fall out).

Your assignment will have an overlowed div when complete.