Leo Leo - 1 month ago 5
CSS Question

Can't display section elements inline

I have three section elements that hold css animations inside. When I try to put them side by side using display: inline or float them, they pile up.

HTML

<section class="spinner-1">
<div class="spinner"></div>
</section>

<section class="spinner-2">
<div class="spinner"></div>
</section>

<section class="spinner-4">
<div class="spinner"></div>
</section>


CSS

.spinner {
position: absolute;
}

.spinner-1, .spinner-2, .spinner-4 {
height: 100px;
width: 200px;
}


you can see the rest of the css code and preview in codepen.

Answer

It's because you're setting the .spinner itself to position: absolute.

You need to use display: inline-block because you're expecting them to maintain their own width and height. display: inline elements have no direct control over their width and height, so the elements do nothing.