Child-element in inline-block div changes the parents siblings position - html

Question

I have a couple of divs with some content (another div inside). I want the parent divs to be positioned in a nice line and I want the child div to be relative to its parent.
I've made a JSFiddle To illustrate. Right now the divs are all nicely placed, but if you remove the '.btn' div in the last one, everything gets messed up.
To see what I mean, change the HTML in the JSFiddle to:
<div id="expand1" class="expand">
<div id="btn1" class="btn">>></div>
</div>
<div id="expand2" class="expand">
<div id="btn2" class="btn">>></div>
</div>
<div id="expand3" class="expand"></div>
What's going on here? How can I get the desired result?

Answer 1

You should use floats for a better layout:
.expand{
border:1px solid black;
width:400px;
height:400px;
display:inline-block;
float: left;
}
.btn{
cursor:pointer;
position:relative;
top:150px;
left: 150px;
border: 1px solid black;
width:40px;
height:40px;
vertical-align:middle;
text-align:center;
line-height:40px;
}
<div id="expand1" class="expand">
<div id="btn1" class="btn">>></div>
</div>
<div id="expand2" class="expand">
<div id="btn2" class="btn">>></div>
</div>
<div id="expand3" class="expand"></div>

Answer 2

.expand {
border: 1px solid black;
width: 400px;
height: 400px;
display: inline-block;
vertical-align: top;
}
.btn{
margin: -20px 0 0 -20px;
cursor: pointer;
position: relative;
top: 50%;
left: 50%;
border: 1px solid black;
width: 40px;
height: 40px;
vertical-align: middle;
text-align: center;
line-height: 40px;
}
<div id="expand1" class="expand">
<div id="btn1" class="btn">>></div>
</div>
<div id="expand2" class="expand">
<div id="btn2" class="btn">>></div>
</div>
<div id="expand3" class="expand"></div>

Answer 3

You can simply play with the position property to get the desired result.
just add position:relative to your .expand class
.expand {
position:relative;
border: 1px solid black;
width: 400px;
height: 400px;
display: inline-block;
}
and update the position to absolute to your .btn class
.btn {
cursor: pointer;
position: absolute;
top: 150px;
left: 150px;
border: 1px solid black;
width: 40px;
height: 40px;
vertical-align: middle;
text-align: center;
line-height: 40px;
}