percent width doesn't work with 3 columns

Question

I try to make 3 column responsive menu with images ,but when I change the #teams .teams width to percents ,div disappears. Any solutions, please!?

There is my code

#teams .team_select {
  display: table;
  margin: 0 auto 20px auto;
}
#teams #choose {
  display: inline-block;
  /*width: 32.4%;*/
  width: calc(98% / 3);
}
#teams #choose:nth-child(1) {
  margin-right: 1%;
}
#teams #choose:nth-child(2) {
  margin-right: 1%;
}
#teams .teams {
  display: table-cell;
  background-size: cover;
  background-position: center;
  /*width: 360px;
        height: 370px;*/
  width: calc(98% / 3);
  height: auto;
  transition: background-image 1s ease-in-out;
  -webkit-transition: background-image 1s ease-in-out;
  -moz-transition: background-image 1s ease-in-out;
  -o-transition: background-image 1s ease-in-out;
  -pre-transition: background-image 1s ease-in-out;
}
#teams .back {
  background-image: url("https://f4.bcbits.com/img/a3503173982_16.jpg");
}

<div class="team_select">
  <div id="choose">
    <a href="">
      <div class="teams back"></div>
    </a>
  </div>
  <div id="choose">
    <a href="">
      <div class="teams back"></div>
    </a>
  </div>
  <div id="choose">
    <a href="">
      <div class="teams back"></div>
    </a>
  </div>
</div>

I made a JSFiddle too

Possible duplicate of [3 inline-block divs with exactly 33% width not fitting in parent](http://stackoverflow.com/questions/15653017/3-inline-block-divs-with-exactly-33-width-not-fitting-in-parent) — Sebastian Simon, Aug 02 '16 at 18:14

score 0 · Answer 1 · answered Aug 02 '16 at 19:08

I find the solution with this and made the short code ,but it works nice. Only problem is that ,with min-height he leave blank space after divs, and I dont know how to remove that.

HTML

<div id="teams">
    <ul>
        <a href=""><li class="back"></li></a>
        <a href=""><li class="back"></li></a>
        <a href=""><li class="back"></li></a>
    </ul>
</div>

CSS

#teams{
        width:100%;
    }

    #teams ul{
        overflow:auto;
    }

    #teams li{
        list-style:none;
        display:inline-block;
        width: 31%;
        min-height: 700px;
        height: auto;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    li.back{background-image:url("https://f4.bcbits.com/img/a3503173982_16.jpg");}
    li.back:hover{background-image:url("https://designschool.canva.com/wp-content/uploads/sites/2/2015/10/How-To-Use-Blurred-Images-In-Your-Designs-To-Great-Effect_Thumbnail_01.png");}

There is new JSFiddle

`background-size: 100%;` need to change to `background-size: cover;` — eatmailyo, Aug 02 '16 at 19:46

percent width doesn't work with 3 columns

1 Answers1