0

I'm a novice and I just can't crack this one. I have three divs within a container div. They just won't line up neatly to make 100% - gaps appear between them, even though I've reset margin and padding to 0. As a result, the divs sometimes overflow.

I've stripped back the code to illustrate my problem simply.

body {
  margin: 0;
  padding: 0;
}

div {
  height: 100px;
}

.outsideDiv {
  width: 100%;
  color: white;
  background-color: black;
}

.insideDiv {
  display: inline-block;
  width: 33%;
}

#div1 {
  background-color: red;
}

#div2 {
  background-color: green;
}

#div3 {
  background-color: blue;
}
<body>
  <div class="outsideDiv">
    <div class="insideDiv" id="div1">width = 33%</div>
    <div class="insideDiv" id="div2">width = 33%</div>
    <div class="insideDiv" id="div3">width = 33%</div>
  </div>
</body>

Live version.

I'm missing something obvious, right? Why are there thin gaps between the divs?

polkovnikov.ph
  • 6,256
  • 6
  • 44
  • 79
Markus
  • 479
  • 4
  • 17
  • Thank you @polkovnikov.ph & @Alohci. Yes, there _are_ similar questions (though I couldn't find them initially) - and so many different answers! The simplest seems to be to add the `display: flex;` attribute to the container div. All solutions are [listed here](https://codepen.io/chriscoyier/pen/hmlqF). Thanks again. – Markus Jun 21 '17 at 23:37

1 Answers1

0

try changing you css like below

.insideDiv {  display: inline-block;  width: 33.33%;  float:left;}
Pons Purushothaman
  • 2,225
  • 1
  • 14
  • 23
  • Many thanks; that works perfectly. I don't really understand why it's necessary to set the float attribute, though. – Markus Jun 21 '17 at 23:20