Why is the absolute width of an element limited to the parent inline-block
I have the following setup :
div {
position: relative;
display: inline-block;
}
div div {
position: absolute;
top: 100%;
background: green;
}
a {
width: 25px;
float: left;
}
<div>
some
<div>
<a href="">1</a>
<a href="">2</a>
</div>
</div>
My question is, why does the div
containing elements a
collapse on the parent div's width? I would expect the items to a
stay on the same line, but they will be wrapped. Is the behavior expected? How can I get around this?
source to share
I would expect the items to stay on the same line, but they will be wrapped. Is the behavior expected?
Yes. they float to the left, but the parent is absolute, thus constrained from floating documents. Has no width, so inner elements are aligned with the available space (0), even when floating to the left.
a
inline
Default items .
First of all you have to uninstall float
from anchors
, install for them soon inline-block
. However, they are stacked vertically to set this set white-space: nowrap;
to parent.
div{
display: inline-block;
position: relative;
}
div div {
position: absolute;
top: 100%;
background: green;
white-space: nowrap; /* needed! for inner inline elements */
}
a {
width: 25px;
display:inline-block; /* needed just for the 25px width! (otherw. remove) */
}
<div>
some
<div>
<a href="">1</a>
<a href="">2</a>
</div>
</div>
source to share