CODEWITHSUNDEEP
htmlcss
Jacob
Jacob

Reputation: 359

Divs that float within container div

I'm working with creating a series of card type objects on screen that would be in different groupings. Within their own groups, they need to be float: left;

However, when I do this, I get them all floating regardless of their grouping.

example (in jade syntax):

div(ng-init="") // my 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 to have 2 divs, stacked on top of eachother in the flow. Then within those divs, have divs that float left only within it's container div.

My css is as 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, and 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 very much for the help.

Upvotes: 0

Views: 72

Answers (2)

P. Jairaj
P. Jairaj

Reputation: 1033

Just add this to .card-container in css:

overflow:hidden;

More info: CSS: DIV containing no height on float set

Upvotes: 1

JAX
JAX

Reputation: 108

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

Upvotes: 2

Related Questions