CODEWITHSUNDEEP
htmlcsswidth
Mark
Mark

Reputation: 337

How to divide div into 5 equal pieces using % width in CSS

I want to divide my div "tile-container" with the width of 100% into 5 equal pieces. I thought that creating 5 divs inside with the width of 25% would solve the problem but it didn't. Container seems to be to small. Here is my code:

<head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="tile-container">
                    <div class="tile"></div>
                    <div class="tile"></div>  
                    <div class="tile"></div>  
                    <div class="tile"></div>  
                    <div class="tile"></div>        
                </div>
            </div>
        </div>
    </div>
</body>

And stylsheet.css file:

.tile-container{
    position: relative;
    border: solid #BDBDBD 2px;
    margin: 5px 0px;
    width:100%;
  }

.tile{
    width: 20%;
    min-height:22px;
    border: 1px #BDBDBD solid;
    display: inline-block;
}

Upvotes: 1

Views: 9113

Answers (1)

Djaouad
Djaouad

Reputation: 22766

The problem is with the spacing in the html between the divs, to ignore the spacing you can add font-size:0 to the .tile-container, then use a specific font-size to the .tile :

.tile-container{
  position: relative;
  border: solid #BDBDBD 2px;
  margin: 5px 0px;
  width:100%;
  font-size:0; /* add */
}

.tile{
  font-size:20px; /* or whatever you want */
  width: 20%;
  min-height:22px;
  border: 1px #BDBDBD solid;
  display: inline-block;
}
<head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="tile-container">
                    <div class="tile">A</div>
                    <div class="tile">B</div>  
                    <div class="tile">C</div>  
                    <div class="tile">D</div>  
                    <div class="tile">E</div>        
                </div>
            </div>
        </div>
    </div>
</body>

Another method would be to comment out the spaces :

.tile-container{
  position: relative;
  border: solid #BDBDBD 2px;
  margin: 5px 0px;
  width:100%;
}

.tile{
  width: 20%;
  min-height:22px;
  border: 1px #BDBDBD solid;
  display: inline-block;
}
<head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <div class="tile-container">
          <div class="tile">A</div><!--
       --><div class="tile">B</div><!--
       --><div class="tile">C</div><!--
       --><div class="tile">D</div><!--
       --><div class="tile">E</div>
        </div>
      </div>
    </div>
  </div>
</body>

Upvotes: 5

Related Questions