3

I have a parent which its display propertis is inline-block. and it has some children that their display is also inline-block. The width of children are fixed, 250px. And the design is responsive.

I expect the parent div's width to collapse to the width of children, when there are more than one line of children, but it doesn't.

In the example, to get rid of that 150px red background in the right side of the parent.

What Should I do?

.parent{
  display: inline-block;
  width: 400px; 
  background-color: red;
}

.child{
  
  display: inline-block;
  width: 250px;
  height: 60px;
  background-color: blue;
  }
<div class="parent">
  
  
  <div class="child">
    </div>
  
  
  <div class="child">
    </div>
  
  
  </div>
aynber
  • 22,380
  • 8
  • 50
  • 63
Amirabbas Askary
  • 221
  • 3
  • 6
  • You mean like this - http://jsfiddle.net/2njpettt/ – Paulie_D Aug 03 '15 at 10:14
  • Possible duplicate - http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements – Paulie_D Aug 03 '15 at 10:14
  • Paulie_D thanks for your comments but none of them is my issue. The first one is relevant. The issue is that in your link http://jsfiddle.net/2njpettt/ for example, if you re-size the window to make the parent div for example 400px, and as the children width are 250 px, there is space only for one child in a line. And then there is this 150px red background in the right side of the parent. I WANT TO GET RID OF THAT! – Amirabbas Askary Aug 03 '15 at 11:18
  • Bascially...you can't AFAIK...that's just how `inline-block` works You might need to re-think your options. I'll see if I can find a relevant SO question that has the full answer. – Paulie_D Aug 03 '15 at 11:21
  • A solution would be to set text-align:center for the parent to at least divide the redundant red bg to both sides, but then my issue is the last row of children which align ugly when the number of children is not divisible by the number of columns. – Amirabbas Askary Aug 03 '15 at 11:22

0 Answers0