0

I would like to align seven divs in another parent container, all should have the same height (as the parent container) and width, except the very first and the last one.

I tried something like that:

HTML

<div id="weatherBar">
  <div class="arrow"></div>
  <div class="table-wrapper">
    <div>1</div>
  </div>
  <div class="table-wrapper">
    <div>2</div>
  </div>
  <div class="table-wrapper">
    <div>3</div>
  </div>
  <div class="table-wrapper">
    <div>4</div>
  </div>
  <div class="table-wrapper">
    <div>5</div>
  </div>
  <div class="arrow"></div>
</div>

CSS

div#weatherBar {
  position: relative;
  width: 60vw;
  max-width: 60vw;
  height: 10vh;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(255, 255, 255);
  overflow: hidden;
  margin-top: 10vh;
}

div#weatherBar div.table-wrapper {
  min-height: 10vh;
  max-height: 10vh;
  min-width: 10vw;
  max-width: 10vw;
  border: solid 0.5px blue;
  float: left;
  overflow: hidden;
}

div#weatherBar div.arrow {
  min-height: 10vh;
  max-height: 10vh;
  min-width: 5vw;
  max-width: 5vw;
  float: left;
  overflow: hidden;
  background-color: red;
}

But what happens is that the last div does not appear (I attached a picture) and I have no idea why. Could you help me out?

Thank you in advance! :-)

Attached image

Gaurav Tripathi
  • 1,265
  • 16
  • 20
j3141592653589793238
  • 1,810
  • 2
  • 16
  • 38

1 Answers1

1

The border of elements are not included by default in the width of an element as box-sizing is content-box by default.

Change it to border-box so that borders are included in the width using:

* {
  box-sizing: border-box;
}

See demo below:

* {
  box-sizing: border-box;
}
div#weatherBar {
  position: relative;
  width: 60vw;
  max-width: 60vw;
  height: 10vh;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(255, 255, 255);
  overflow: hidden;
  margin-top: 10vh;
}

div#weatherBar div.table-wrapper {
  min-height: 10vh;
  max-height: 10vh;
  min-width: 10vw;
  max-width: 10vw;
  border: solid 0.5px blue;
  float: left;
  overflow: hidden;
}

div#weatherBar div.arrow {
  min-height: 10vh;
  max-height: 10vh;
  min-width: 5vw;
  max-width: 5vw;
  float: left;
  overflow: hidden;
  background-color: red;
}
<div id="weatherBar">
  <div class="arrow"></div>
  <div class="table-wrapper">
    <div>1</div>
  </div>
  <div class="table-wrapper">
    <div>2</div>
  </div>
  <div class="table-wrapper">
    <div>3</div>
  </div>
  <div class="table-wrapper">
    <div>4</div>
  </div>
  <div class="table-wrapper">
    <div>5</div>
  </div>
  <div class="arrow"></div>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95