html - Divs that float within container div -


i'm working creating series of card type objects on screen in different groupings. within own groups, need float: left;

however, when this, them floating regardless of grouping.

example (in jade syntax):

div(ng-init="") // angular view div     div(class="card-container")         div(ng-repeat="i in instance", class="card")             p {{i.instancename}}     div(class="card-container")         div(ng-repeat="d in database", class="card")             p {{d.databasename}} 

so i'm hoping have 2 divs, stacked on top of eachother in flow. within divs, have divs float left within it's container div.

my css follows:

.card {     height: 100px;     width: 100px;     float: left;     position:relative;     border-radius: 5px;     text-align: center;     margin: 10px;     font-weight: bold;       display:-ms-flexbox;     -ms-flex-pack:center;     -ms-flex-align:center;       /* firefox */     display:-moz-box;     -moz-box-pack:center;     -moz-box-align:center;      /* safari, opera, , chrome */     display:-webkit-box;     -webkit-box-pack:center;     -webkit-box-align:center;      /* w3c */     display:box;     box-pack:center;     box-align:center; }    .card-container {      width:100%; } 

thanks help.

try adding .card-container { clear:both; }


Comments

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -