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
Post a Comment