Box not expanding height wise as min-height is already given - css

Question

My class goes like this to expand the div dynamically as min-height is given. May i know what goes wrong with this.
.gil_Individual_FormPanelBg
{
width:500px;
min-height:50px !Important;
float:none;
margin:5px auto;
padding:4px;
background-color:#f7f7f7;
border:Solid 1px #e6e6e6;
-border-radius:4px 4px 4px 4px;
-Moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}

Answer 1

Shabir, looks as though you have got a whole heap of float:left's when there is no need.
Try this updated CSS:
.gil_Individual_FormPanelBg
{
width:500px;
min-height:50px;
margin:5px auto;
padding:4px;
background-color:#f7f7f7;
border:Solid 1px #e6e6e6;
-border-radius:4px 4px 4px 4px;
-Moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
.gil_Individual_FormWrapper
{
position:relative;
height:auto;
width:100%;
margin:2px auto;
padding:0px;
}
.gil_Individual_FormRow
{
position:relative;
width:100%;
min-height:20px !Important;
margin:3px 0 0 0;
padding:0px;
}
.gil_Individual_FormLable
{
position:relative;
width:150px;
height:15px;
float:left;
margin:0px;
padding:0px;
font-family:'Helvetica', 'Arial', 'Sans-Serif';
font-size:11px;
font-weight:Normal;
color:#3B5998;
text-align:left;
text-decoration:none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.gil_Individual_FormCtrl
{
position:relative;
width:350px;
min-height:15px !Important;
float:left;
margin:0px;
padding:0px;
font-family:'Helvetica', 'Arial', 'Sans-Serif';
font-size:11px;
font-weight:Normal;
color:#333;
text-align:left;
text-decoration:none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
HTML stays the same. If you are going to add the class float. Consider creating a clear class to place after the floated DIV.
Class something like this:
.clear{
clear:both;
margin:0;
padding:0;
height:1px;
}
After reviewing the link you posted, it does look like you have probably over complicated the build but hopefully it should work the way you want it to now.
Dan