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

CSS
    th { background-color:lightblue; width:600px; }
    th span { background-color:red; float:left; height:20px; margin:5px 3px; }
    th span:last-child { float:right }

HTML
    <th>
        <span>Button</span>
        <span>Button</span>
        <span>Button right</span>
    </th>