How to display new brand in new line - css

Question

This is my css and HTML template file.
#wrapper {
display: inline!important;
height: 275px;
max-width: 540px;
}
.box {
margin: 5px;
display: inline-block;
width: 170px;
height: 275px!important;
background-color: #F5FBEF;
text-align: center;
float: left;
}
.ng-repeat {
display: inline-block;
}
HTML File
<br>
<div>
<div ng-if="SearchText.length<3" ng-repeat="product in pc.ProductService.Products | filter:FilterExpr:true |orderBy:['SubCategoryName','BrandName'] | groupBy:['BrandName']" >
<div ng-show="product.group_by_CHANGED"><h2>{{product.BrandName}} </h2></div>
<div id=wrapper>
<div class='box'>
<ng-include src="'commonTemplate.html'"></ng-include>
</div>
</div>
</div>
<!-- template (common piece of code) -->
<script type="text/ng-template" id="commonTemplate.html">
<div class="BrandName"> <b>{{product.BrandName}}</b> </div>
<div class="ProductName"> {{product.ProductName}} </div>
<br>
<div> <img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img> </div>
<div class="ProductVariants">
<select class="form-control btn btn-default btn-xs text-center" ng-init="SelectedVariant = product.Variants[0]" ng-model="SelectedVariant" ng-options="variant.VariantName for variant in product.Variants" ng-change="ChangeVariant(product.ProductID, SelectedVariant.VariantID)"></select>
</div>
<div class="Price">
<strike> {{SelectedVariant.MRP}} </strike> {{SelectedVariant.SellPrice}}
</div>
<div class="AddToCart" ng-if="SelectedVariant.InCart==0">
<a class="btn btn-success btn-sm" ng-click="pc.AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<div class="AddToCart" ng-if="SelectedVariant.InCart>0">
<a class="btn btn-default btn-xs" ng-click="pc.PlusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-plus"></span>
</a>
<button type="button" class="btn btn-sm btn-info disabled">{{SelectedVariant.InCart}} in cart</button>
<a class="btn btn-default btn-xs" ng-click="pc.MinusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</div>
</script>
</div>
This is how my page looks like-
What i want when new brand comes say annapurna or panchratan, display that in new line. and then in next line display all the products of that brand.
(similar to aashirvad first brand.)
How to do that?

Answer 1

You have to wrap whole template with outer div that is full width:
<script type="text/ng-template" id="commonTemplate.html">
<div class="brand-wrapper">
<div class="BrandName"> <b>{{product.BrandName}}</b> </div>
...
</div>
</script>
// May be omitted as div already block element.
.brand-wrapper {
clear: both; // if floated
width: 100%;
display: block;
}

Answer 2

Change wrapper:inline to inline-block and it should work. Also put your h2 inside the wrapper.
Also, change the float on the box to float:right;