Leo Leo - 1 year ago 64
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.


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

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

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


.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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download