Absolute/relative positioning disrupts alignment of adjacent div - html

Question

I am using absolute and relative positioning to horizontally and vertically center a div in a container div. Adjacent to this container is another div which should fit neatly beside the container inside the top-level container div. But instead, it moves down, almost completely out of the boundary of the top-level div. Source code:
#top-level {
background: #90c0ff;
height: 400px;
width: 600px;
}
#container {
background: #bbffbb;
height: 400px;
width: 400px;
display: inline-block;
position: relative;
text-align: center;
}
#inner {
height: 200px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
}
#adjacent {
background: #ff5050;
height: 395px;
width: 195px;
display: inline-block;
}
<div id="top-level">
<div id="container">
<div id="inner">
Internal Text
</div>
</div>
<div id="adjacent">
Sample text
</div>
</div>
Example fiddle here
Any ideas on why the adjacent div doesn't align properly?

Answer 1

You could use flex on the parent instead of inline-block on the children, would solve the issue of the second box being pushed down if there isn't enough space:
#top-level {
background: #90c0ff;
height: 400px;
width: 600px;
}
#container {
background: #bbffbb;
height: 400px;
width: 400px;
position: relative;
text-align: center;
display: inline-block;
vertical-align:top;
}
#inner {
height: 200px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
}
#adjacent {
background: #ff5050;
height: 395px;
width: 195px;
display: inline-block;
vertical-align:top;
}
<div id="top-level">
<div id="container">
<div id="inner">
Internal Text
</div>
</div>
<div id="adjacent">
Sample text
</div>
</div>
If you want to know the actual reason for your alignment issues, it's because you have two inline block elements that are different heights next to each other.
The default vertical alignment for inline block elements is baseline which means that you get the effect that you see.
If you change the vertical align to top for both the container and the adjacent, your code will work as you want:
#top-level {
background: #90c0ff;
height: 400px;
width: 600px;
/* add te following */
display: flex;
justify-content: space-between;
}
#container {
background: #bbffbb;
height: 400px;
width: 400px;
position: relative;
text-align: center;
}
#inner {
height: 200px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
}
#adjacent {
background: #ff5050;
height: 395px;
width: 195px;
}
<div id="top-level">
<div id="container">
<div id="inner">
Internal Text
</div>
</div>
<div id="adjacent">
Sample text
</div>
</div>