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;
}
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
精彩评论