Setting block element minimum height and width

As you just saw setting the height and width of a DIV can be a bad idea if the content is too large for those dimensions.

You can instead use min-height:

            
width:100px;
min-height:200px;
        

Replace the existing width and height in boxmodel.html. Now the box will expand to fit the content.

Min-width is a bit less intuitive as it expands to the full width of the page even if there is space for the content to wrap vertically. Try it. If you shrink the browser window enough you can see what min-widrth does.

submit to reddit Delicious Tweet