Question

I’m trying to achieve that one inline-block elements, would be aligned left and the other one would be aligned right, without changing their display type.

I would like to get a CSS version, otherwise I could live with a jQuery approach as well.

What I mean, I just wanted to show the first two buttons aligned on the left side, the third button on the right side.

jsBin not working example

<table>
    <thead>
      <tr>
        <th>
          <div style="background-color: lightblue; width: 600px;">
            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px;float: left;">
              Button
            </span>

            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px; float:right;">
              Button right
            </span>
        </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr><td>where did the background of the header cell go? the background is still there if the elements do not float.</td></tr>
    </tbody>
  </table>

Answer 1

Just set property float:right to your span element.

Working Example

In the second example you provided in the comment, the one with the table, you simply had that problem, because you didn’t set the style to the th tag but to the div tag. If you set the property of background-color and width to the th tag, you will get what you want.

Another Working Example