I've been experimenting with display:inline-block
on div elements and I'm trying to work out why my two inner div elements are not displaying on the same line. Both divs are set to width of 200px and their parent div is set to 400px.
If I set the inner divs to float left instead of using inner-block
it works as expected.
The code snippet is as below:
Note: that I've set box-sizing to border-box. So I assumed this would make both inner divs exactly 200px even with the 1px border.
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0
}
.container {
width: 400px;
}
.inner {
border: 1px solid black;
padding: 10px 0;
width: 200px;
display: inline-block;
}
<h1>Why does this display on two lines?</h1>
<div class="container">
<div class="inner">Testing border box property</div>
<div class="inner">Second div</div>
</div>