Fit div width to inline-block children (unknown number of divs per row)

Question

I want the container div (#a in this example) to fit the width of its children, that are inline-block divs.

The number of divs per row is unknown, because it depends on the size of the screen.

On the example, what I would like is that there is no extra gray space at the right of the #a container.

Is it possible? (pure CSS please)

#a {
    background-color: gray;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
}

<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>

Duplicate - http://stackoverflow.com/questions/31104214/fit-div-width-to-inline-block-children. Please don't repost closed questions. — Paulie_D, Jun 28 '15 at 21:18
It is a duplicate because the answer would be the same. It's just worded slightly differently. — Paulie_D, Jun 28 '15 at 21:22
Agree with @Arnaud. The other question deals with a known number of children per row. This question deals with an unknown number. — Rick Hitchcock, Jun 28 '15 at 21:23
`The number of divs per row is unknown, because it depends on the size of the screen`. How is this done? if via javascript, then I would use CSS percentages so that numberOfDivs*percent = totalWidth. If checking the size of screen is done with media queries, then I think pure CSS will always keep the gray part. — Adib Aroui, Jun 28 '15 at 21:26
This is done in CSS. The container div #a is actually included in a bigger div, let's say #master, that has a width of 80% and a max-width of 900px. — Arnaud, Jun 28 '15 at 21:28
I see, but I still don't understand how do you calculate the number of divs inside #a with CSS. I am not an expert but when I encountered the same issue, I found no exact solution with pure CSS(that will fully remove the gray part whatever the screen size is and with below conditions (maxwidth and percent from parent) ). — Adib Aroui, Jun 28 '15 at 21:37
I don't calculate it, it is just a consequence on my choices of width and max-width. — Arnaud, Jun 28 '15 at 21:38
Then, and correct me if i am wrong, there will always be a gray part at the right of your parent if you make number of child divs just a consequence of initial choices of width and max-width ( except if the current screen size is exactly numberOfDivs*110) — Adib Aroui, Jun 28 '15 at 21:46
Take a look at display: flex. You might be able to get what you're after (browser support dependent). https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Mike B., Jul 04 '15 at 17:01
@Arnaud see my answer i try many solution but it wont work then i try one thing then it works but its an little hacky thing may be it will help you bro — Keval Bhatt, Jul 09 '15 at 04:29
It's very similar to this [question](http://stackoverflow.com/a/30739395/483779) that I answered, well I'm willing to see if there is a better plain css solution too. — Stickers, Jul 09 '15 at 15:31
You can't just define a wrapper div as a row with a width set? — Dr Upvote, Jul 10 '15 at 15:57

score 9 · Accepted Answer · answered Jun 30 '15 at 11:24

Since there doesn't seem to be a CSS-only method, here's some quick JavaScript to get the job done.

Temporarily change the parent's display style to inline, so that it will shrink-to-fit its content.
Set the parent's width to its shrunk-to-fit width using getBoundingClientRect().
Restore the parent's default display style by clearing it.

Snippet

var a = document.getElementById('a');
a.style.display = 'inline';
a.style.width = a.getBoundingClientRect().width + 'px';
a.style.display = '';

#a {
  background-color: gray;
}
.b {
  width: 110px;
  height: 110px;
  display: inline-block;
  background-color: blue;
}

<div id="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>

Thanks, that's better than nothing. – Arnaud Jun 30 '15 at 18:52 — Arnaud, Jun 30 '15 at 18:52

Atul Gupta · Answer 2 · 2015-07-04T16:58:11.020

We can use property of tables or inline-block that adjust its width as required. But it doesn't solves the problem fully when you have boxes in more than 1 line

So just add display:table; to #a

<style>
#a {
    background-color: gray;
    display:table;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
}
</style>
<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>

score 1 · Answer 3 · edited Sep 27 '17 at 10:00

1

Well, one solution is to use media queries:

#a {
    background-color: gray;
    display: block;
    width: 110px;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
}

@media (min-width: 220px){
    #a {
        width: 220px;
    }
}

@media (min-width: 330px){
    #a {
        width: 330px;
    }
}

@media (min-width: 440px){
    #a {
        width: 440px;
    }
}

@media (min-width: 550px){
    #a {
        width: 550px;
    }
}

@media (min-width: 660px){
    #a {
        width: 660px;
    }
}

<div id="a">
    <div class="b"></div><!--
    --><div class="b"></div><!--
    --><div class="b"></div><!--
    --><div class="b"></div><!--
    --><div class="b"></div><!--
    --><div class="b"></div>
</div>

JSFiddle

edited Sep 27 '17 at 10:00

Anish Nair

3,238
29
41

answered Jun 28 '15 at 21:06

Vucko

20,555
10
56
107

Is there a way to do some kind of a for loop? – Arnaud Jun 28 '15 at 21:07
Sure, if you use some CSS preprocessor like [SASS](http://sass-lang.com/) or [LESS](http://lesscss.org/). – Vucko Jun 28 '15 at 21:08
2

Ok. Thanks for this solution, it seems good, but I would prefer a more "elegant" solution if someone has one. – Arnaud Jun 28 '15 at 21:12
2

For a pure CSS solution I doubt there is. – Vucko Jun 28 '15 at 21:22

score 0 · Answer 4 · answered Jul 06 '15 at 04:52

I do not have much reputations to comment. So added my suggestions here. This is supported in Firefox. For other browsers, we'll have to check.

#a {
    background-color: gray;
    display: -moz-inline-box;
}


#a:after, #a:before {
    display: table;
    content: "";
}
#a:after{
    clear: both;
}

.b {
    width: 110px;
    height: 110px;    
    float: left;
    background-color: blue;
    border: 2px solid #888;
}

<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>

click here for display: -moz-inline-box demo

click here for display: -moz-inline-box

score 0 · Answer 5 · answered Jul 09 '15 at 04:27

See this it is little hacky solution. but may be it will help you.

.b {
  width: 110px;
  height: 110px;
  display: inline-block;
  background-color: blue;
    border: 8px solid gray;
    float: left;
  
}

<div id="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>

score 0 · Answer 6 · answered Jul 10 '15 at 15:41

Take A look at this:

devided the screen into 10 parts with: width: 10vw. it means 10 percent of view's width.

body, html{
  padding: 0;
  margin: 0;
}

#cont {
  width: 100%;
  text-align: left;
  overflow: hidden;
  background: black;
}

#cont .cell {
  width: 10vw;
  height: 10vw;
  background: red;
  float: left;
  
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 1);
}

<div id="cont">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

shrekked · Answer 7 · 2015-07-11T05:01:14.377

Not sure if this is what you're looking for, and I don't believe anything < ie9 supports it, but you could use the flexbox model.

#a {
    background-color: gray;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
    border: 1px solid #fff;
}

<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>

score 0 · Answer 8 · answered Jul 11 '15 at 14:56

If the number of inner elements is dependent entirely on the width of the screen (implying that you have code somewhere that is generating the number of elements based on that width), then this might well be what you are looking for. I would not, however, recommend this generation as an approach because your outer div becomes entirely a container and loses any responsive capacity you might have hoped for. But if a container is what you need, then this will certainly work. Note that the width of the container div must be smaller than the width of the smallest element otherwise it will take up as much width as it can.

  #a {
    background-color: gray;
    display: flex;
    width:50px;
}

.b {
    min-width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
}
.c {
    min-width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: red;
}

   <div id="a">
    <div class="b">sample Text</div>
    <div class="c">sample Text</div>
    <div class="b">sample Text</div>
    <div class="c">sample Text</div>
    <div class="b">sample Text</div>
    <div class="c">sample Text</div>
    <div class="b">sample Text</div>
    <div class="c">sample Text</div>
    <div class="b">sample Text</div>
</div>

Fit div width to inline-block children (unknown number of divs per row)

8 Answers8