Reputation: 21
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
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
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