开发者

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

开发者 https://www.devze.com 2023-02-09 08:11 出处:网络
My class goes like this to expand the div dynamically as min-height is given. May i know what goes wrong with this.

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

0

精彩评论

暂无评论...
验证码 换一张
取 消