CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ashish
Ashish

Reputation: 303

Change width of parent div according to content

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/

Upvotes: 3

Views: 3248

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39382

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

Upvotes: 5

Related Questions