clear fix solution

by niki4810

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="mnSearchContainer group">
    <div class="mnSearchButtonBar group">
        <button>Add Remove</button>
        <button>Load</button>
        <button>Clear</button>
        <button class="btn btn-small btn-primary">Search</button>
    </div>
    <div class="mnSearchSaperator group">
    </div>
    
    <div class="mySearchControl group">
        <label class="inline">
            Submission #
            <input type="text"  name="RefId" value="" />
        </label>    
    </div>
    <div class="mySearchControl group">
        <label class="inline">
            Parent Wholesale Name
            <input type="text"  name="ExternalMemName" value="" />
        </label>    
    </div>
</div>

CSS

div{
     border : 1px solid #e5e5e5;
}
.mnSearchContainer {
    border : 1px solid #e5e5e5;
    margin : 2px;
}
.mnSearchButtonBar{
   background-color : yellow;
   padding: 2px; 
}
.mnSearchSaperator {
    border-top : 1px solid #ccc;
}

.mySearchControl {
    padding:1px;
    float :left;
/*    background-color: red;*/
}

/*clear fix solution*/
 .group:before, .group:after {
    content:"";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
}