MattsBits
MattsBits

MattsBits

Set Minimum Height of HTML DIV That Works In All Browsers  

by Matt Hawkins, 29/03/2012
Categories : HTML & CSS

Setting a minimum height of a DIV isn't as easy as it should be especially if you want it to work in most browsers. This article presents a neat solution that I have used successfully.

This example will allow you to create a DIV with a minimum height of 200px. If its content requires it to be bigger it will expand as required.

In your CSS file the first step is to define a class for your div:

.Div1{

} 


Then set the min-height property:
.Div1{
     min-height:200px; 
} 


Then set the normal height to auto :
.Div1{
     min-height:200px;
     height:auto !important; 
} 


Then finally set the normal height again with a value :
.Div1{
     min-height:200px;
     height:auto !important;
     height:200px; 
} 


In HTML you would then create a DIV and apply the Div1 class :
<div class="Div1">This is my div content.</div>

Author : Matt Hawkins  Last Edit By : Matt Hawkins
PHP Powered  MySQL Powered  Valid XHTML 1.0  Valid CSS  Firefox - Take Back The Web  EUKHost - Recommended Webhosting Solutions

MattHawkins CMS v3.0 - Copyright 2009-2017