Change width of parent div according to content

Question

I have number of of child divs in a parent div. It may be minimum 2 to maximum 8. I have kept the width of child divs 25% fixed. The problem is when there are 2 or 3 child divs, then first 50% or 75% of parent div is used to display these divs. But I want to use center 50% or 75% of parent div to display these divs. In case there are more than 4 child divs then I want to display first row of parent row without any change and want to use centered 25% for 5th div, centered 50% for 5th and 6th and centered 75% for 5th, 6th and 7th div.

HTML:

<div class="container">
    <p>Block1</p>
    <div class="banner">
        <div class="block1">
            <img src="hoels.png" />
            <p>Banquet Halls</p>
        </div>
        <div class="block1">
            <img src="hoels.png" />
            <p>Resorts</p>
        </div>
        <div class="block1">
            <img src="hoels.png" />
            <p>Hotels</p>
        </div>
        ---------------------------
        ---------------------------
        ---------------------------
    </div>
</div>

CSS:

.container{
    width:100%;
    margin:0 auto;
    max-width:991px;
}
.banner{
    padding:20px;
}
.block1{
    float:left;
    width:33%;
    text-align:center;
}
.block1 img{
    width:100%;
max-width:100px;
}

Fiddle: https://jsfiddle.net/7fpt4m5e/2/

score 5 · Accepted Answer · edited May 23 '17 at 11:46

Approach #01 (Using Flexbox):

You can use css3 flexbox. Add following css on parent element:

.banner {
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
}

Note: You will need to remove float from child elements as with flexbox it is unnecessary.

.container{
  width:100%;
  margin:0 auto;
  max-width:991px;
}
.banner{
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
  padding:20px;
}
.block1{
  background: green;
  width:25%;
  text-align:center;
}
.block1 img{
  width:100%;
  max-width:100px;
}

<div class="container">
  <p>Block1</p>
  <div class="banner">
    <div class="block1">
      <img src="hoels.png" />
      <p>Banquet Halls</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Resorts</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Hotels</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Farm Houses</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Farm Houses</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Farm Houses</p>
    </div>
  </div>
</div>

Approach #02(Without Flexbox):

You can use display: inline-block on child elements. As we can affect inline and inline-block elements with text-align center property so we will use this trick to center align child elements.

Add following css:

/* Following css should be added on parent */
.banner {
  text-align: center;
  letter-spacing: -4px;
  font-size: 0;
}
/* Following css should be added on child elements */
.block1{
  letter-spacing: 0;
  font-size: 14px;
  width:25%;
  display: inline-block;
  vertical-align: top;
}

.container{
  width:100%;
  margin:0 auto;
  max-width:991px;
}
.banner{
  text-align: center;
  letter-spacing: -4px;
  font-size: 0;
  padding:20px;
}
.block1{
  letter-spacing: 0;
  background: green;
  font-size: 14px;
  width:25%;
  text-align:center;
  display: inline-block;
  vertical-align: top;
}
.block1 img{
  width:100%;
  max-width:100px;
}

<div class="container">
  <p>Block1</p>
  <div class="banner">
    <div class="block1">
      <img src="hoels.png" />
      <p>Banquet Halls</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Resorts</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Hotels</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Farm Houses</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Farm Houses</p>
    </div>
    <div class="block1">
      <img src="hoels.png" />
      <p>Farm Houses</p>
    </div>
  </div>
</div>

font-size and letter-spacing properties are being used in parent and child elements to remove excess space caused by inline-block. For more ways of removing this space, check this Question

Thanks Sir..Working both for me...Which one is better according to you ? — Ashish, Dec 28 '16 at 08:06
@Ashish I would recommend using `flexbox`. All latest browser are supporting this. But if you need support in old browsers you should use 2nd method as it will work perfectly even in IE8. — Mohammad Usman, Dec 28 '16 at 08:08
Is it possible to change width of block1 div to 50% or 33% in case of 2 or 3 child div when resizing window to mobile view... — Ashish, Dec 28 '16 at 08:12
@Ashish yes you can use media queries to override `width` to 50% or 33% as you would like. — Mohammad Usman, Dec 28 '16 at 08:15
Yeah i know that but i want to change the width in case to 2 or 3 child div only... — Ashish, Dec 28 '16 at 08:17
@Ashish do you wants this? [**Fiddle**](https://jsfiddle.net/xtnurwf8/) — Mohammad Usman, Dec 28 '16 at 08:21
@Ashish Without `flexbox` its difficult. The only way is to use css `table` properties. One row cannot have more than 4 items. For more items you will need to add another row. — Mohammad Usman, Dec 28 '16 at 08:26
@Ashish You can check this [**Fiddle**](https://jsfiddle.net/xtnurwf8/2/). I've created a demo for you. But as I said earlier, items won't wrap in 2 lines in this case. If you will add 5th item in a row, it will adjust in the same row accordingly. However this method will work in almost all browsers as well. — Mohammad Usman, Dec 28 '16 at 08:34
Thanks Sir for your efforts...but it will be difficult for user to read content if there will be 6,7or 8 items in a row on a small screen... — Ashish, Dec 28 '16 at 08:46

Change width of parent div according to content

1 Answers1