CODEWITHSUNDEEP
htmlcss
RenVit318
RenVit318

Reputation: 21

100% is not equal to 100%?

When having two divs next to each other, with both a width set in percentages, 100% is just a bit too much, and causes the two divs to not be next to each other anymore.

99% then leaves a rather big gap between the two divs.

Is there a certain percentage at which the two divs do nicely fit on the page?

And what could be the cause of this problem?

Upvotes: 1

Views: 273

Answers (2)

Etheryte
Etheryte

Reputation: 25317

If you're using inline displaying, the new line between two separate nodes is included as whitespace. This results in the two elements wrapping despite their widths summing up to 100%.

.container {
  width: 200px;
  border: 1px solid blue;
}

.inl {
  display: inline-block;
  width: 50%;
  height: 20px;
  background: green;
}
<div class="container">
  <div class="inl"></div>
  <div class="inl"></div>
</div>

<div class="container">
  <div class="inl"></div><div class="inl"></div>
</div>

Upvotes: 0

dfsq
dfsq

Reputation: 193301

And what could be the cause of this problem?

Most likely this is padding/border which adds up to element width according to default box model. To overcome it change box-sizing property of the respective elements you want to fill 100% width:

.inline-blocks {
    box-sizing: border-box;
}

Upvotes: 1

Related Questions