Is there a way to align two inline-block elements to the left and one to the right without changing their display property?
I am looking for a CSS solution, but would also consider using jQuery if necessary.
In simple terms, I want the first two buttons to be aligned on the left side and the third button on the right side.
Check out this example on jsBin
<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>