Question

I have this fragment of HTML:

<div style="display: inline-block; width: 20px; height: 20px; background-color: silver">
    <span style="display: inline-block; background-color: red; width: 10px; height: 20px;"></span>
    <span style="display: inline-block; background-color: green; width: 10px; height: 20px; "></span>
</div>

My goal is to cover the outer <div> with two spans side-by-side, but instead, one span is on top of another span.

How to make it, so the red SPAN is on the left and the right SPAN is on the right? (note, I would like the solution to support more than 2 inner SPANs).

Answer 1

If you float the spans they will go side by side. An example here.

   <div style=" width: 20px; height: 20px; background-color: silver">
        <span style="display: inline-block; float:left;background-color: red; width: 10px; height: 20px;"></span>
        <span style="display: inline-block; float:left;background-color: green; width: 10px; height: 20px; "></span>
    </div>