CODEWITHSUNDEEP
htmlcssresponsive-design
schumacherj
schumacherj

Reputation: 1324

How to make divs position responsively depending on the number of elements?

How do I center these objects in a way that looks more natural and responsive to how many there are?

The layout is a single div with multiple divs for each gauge. I used .float-left to get them to go to the next row.

Could I get them to be positioned like this if there are 5:

****O****O****O****
******O*****O******

And like this if there are 4:

**O**O**O**O**

enter image description here

Upvotes: 0

Views: 70

Answers (1)

Kevin Jantzer
Kevin Jantzer

Reputation: 9471

I believe to do this you will have to use either JavaScript or CSS Flexbox. Flexbox is only supported in modern browsers though.

Here is a simple example using flexbox:

Demo

HTML

<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

.wrapper {
    margin-bottom: 1em;
    display: flex;
    justify-content: space-around;
}

.wrapper > div {
    width: 100px;
    height: 100px;
    background: blue;
    border: solid 2px red;
}

Of course, to make this work in all modern browsers, your CSS will look more like:

.wrapper {
    margin-bottom: 1em;

    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: space-around;
    -webkit-justify-content: space-around;
    -moz-box-pack: space-around;
    -ms-flex-pack: space-around;
    justify-content: space-around;
}

.wrapper > div {
    width: 100px;
    height: 100px;
    background: blue;
    border: solid 2px red;
}

Upvotes: 1

Related Questions