How to display the equal width of the div using CSS?

Question

I am getting output from a database. Sometimes I am getting 2 div and sometimes I am getting 3 div so I have to set the equal width of the div. I mean if there are 2 div then set 50% of each and if there are 3 div then set 33.33% of each. Would you help me in this?

 #container1
  {
    width: 100%;
    display: inline-flex;
  }
#container1 div{
      color: #fff;
    display: inline-block;
    height: 100%;
    width: 50%;
    background: #24252A;
    text-align: center;
    cursor: default;
    padding: 2em 0;
}

#container1 div:nth-of-type(2) {
    background: red;
    }

#container1 div:nth-of-type(3)
{
    width: 33.33% !important;
}

<div id="container1">
  <!--div depanding upload database-->
  <div></div>
  <div></div>
  <div></div>
</div>

You can define widths based on number of children using the answer on this question https://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has — kinggs, Aug 30 '17 at 10:56
Not dynamically. Flexbox can set **initial** widths but content will change the size of those boxes to reflect their individiual requirements. — Paulie_D, Aug 30 '17 at 10:59

dippas · Answer 1 · 2017-08-30T11:06:11.387

Use flex:1 in child and display:flex in parent

Note: don't need width nor display:inline-block in child

.ct {
  width: 100%;
  display: flex;
}

.ct div {
  color: #fff;
  height: 100%;
  background: #24252A;
  text-align: center;
  cursor: default;
  padding: 2em 0;
  flex: 1
}

.ct div:nth-of-type(2) {
  background: red;
}

<div class="ct" id="container1">
  <!--div depanding upload database-->
  <div></div>
  <div></div>
  <div></div>
</div>
<hr />
<div class="ct" id="container2">
  <!--div depanding upload database-->
  <div></div>
  <div></div>
</div>

score 5 · Accepted Answer · answered Aug 30 '17 at 10:57

Use flex: 1 100% and remove the width:

 #container1
  {
    width: 100%;
    display: inline-flex;
  }
#container1 div{
      color: #fff;
    display: inline-block;
    height: 100%;
    flex: 1 100%;
    background: #24252A;
    text-align: center;
    cursor: default;
    padding: 2em 0;
}

#container1 div:nth-of-type(2) {
    background: red;
    }

<div id="container1">
  <!--div depanding upload database-->
  <div></div>
  <div></div>
  <div></div>
</div>

 #container1
  {
    width: 100%;
    display: inline-flex;
  }
#container1 div{
      color: #fff;
    display: inline-block;
    height: 100%;
    flex: 1 100%;
    background: #24252A;
    text-align: center;
    cursor: default;
    padding: 2em 0;
}

#container1 div:nth-of-type(2) {
    background: red;
    }

<div id="container1">
  <!--div depanding upload database-->
  <div></div>
  <div></div>
</div>

score 1 · Answer 3 · answered Aug 30 '17 at 10:59

1

Just Use flex-grow: 1; in child element. check updated snippet below

#container1
  {
    width: 100%;
    display: flex;
  }
#container1 div{
      color: #fff;
    display: inline-block;
    height: 100%;
    background: #24252A;
    text-align: center;
    cursor: default;
    padding: 2em 0;
    flex-grow: 1;
}

#container1 div:nth-of-type(2) {
    background: red;
    }

<div id="container1">
  <!--div depanding upload database-->
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

answered Aug 30 '17 at 10:59

Super User

9,448
3
31
47

Thanks for the reply.It's working for me. Upvote from my side. – Naren Verma Aug 30 '17 at 11:14
Hello @Super User, Can you help me in this below link https://stackoverflow.com/questions/45946778/how-to-display-ajax-response-value-in-column-format-individual/45956293?noredirect=1#comment78873235_45956293 – Naren Verma Aug 30 '17 at 11:27
@NarendraVerma i have give the answer in that question – Super User Aug 30 '17 at 11:38

score 0 · Answer 4 · answered Aug 30 '17 at 10:56

#container1, #container2
{
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  border:1px solid red;
  margin: 20px 0px;

}
#container1 div, #container2 div{
  flex: 1;
  height: 100%;
  border: 1px solid gray;

}

<div id="container1">
  <!--div depanding upload database-->
  <div></div>
  <div></div>
  <div></div>
</div>
<div id="container2">
  <!--div depanding upload database-->
  <div></div>
  <div></div>
</div>

Try to use display: flex.

How to display the equal width of the div using CSS?

4 Answers4