Question

I have a container that drops down like a notification container, I want to have two bars side by side inside the absolutely positioned div.I don’t want to have to define a width because each div inside will need to adjust widths (because of the presence of a scrollbar or not)

The problem is odd, when .notification-wrapper has absolute or relative positioning the .left and .right divs won’t align side by side, however when i remove absolute/relative from .notification wrapper they do…(i do need relative/absolute to be applied to notification.wrapper)

Here’s what I have:

<span class="notification-wrapper">
<div class="notification-container">

<div class="left">LEFT</div>
<div class="right">RIGHT</div>

</div>
</span>




.notification-wrapper {
height: 32px;
width: 25px;
margin-right: -12px;
margin-left: -12px;
padding: 0px;
font-size: 0px;
position: absolute;
left: 50%;
top: 15px;
right: 50%;
 }
.notification-wrapper .notification-container {
font-size: 12px;
background-color: #FFF;
height: 100px;
position: absolute;
top: 25px;
}
.notification-container .left {
vertical-align: text-top;
display: inline-block;
background-color: #63F;
width: 50px;
}
.notification-container .right {
vertical-align: text-top;
display: inline-block;
background-color: #FFC;
width: 120px;
}

Answer 1

That’s because when you position an element it “shrink-wraps”, meaning it shrinks to its smallest size. Since there’s nothing forcing your two elements to reside side by side the smallest size it can get is if it stacks the elements instead.

I think, since you’re using inline-block (rather than float), you could use white-space: nowrap on the container to force the two inline-block elements not to wrap. You will probably wanna set white-space back to normal for the contents of the elements though.

Also, a span element is an inline version of div and does not allow block level elements as children.