Can you find a solution using just css, to make an element centred when it appears on its own, and aligned to the right when it appears with another element?

<div id="container">
  <div id="element1">content</div><div id="element2">content</div>
</div>

<div id="container">
 <div id="element2">content</div>
</div>

div#element2{
  width:100px;
  margin:0 auto;
}
div#element1{
  width:50px;
  float:left;
}
div#element1 + div#element2{
  width:50px;
  float:left;
  margin:0;
}

div#container div#element2:last-child {
    width:100px;
    margin:0 auto;
}

div#element1{
    width:50px;
    float:left;
}

div##element2{
    width:50px;
    float:left;
    margin:0;
}

#container {
    text-align:center;
}
#element1, #element2 {
    display:inline-block;
}

<style>
    #container {
        margin:0 auto;
        width:100px;
    }

    #container table{
        width: 100%;
        text-align:center;
    }

    #element1{
        background-color:#0000ff;
    }

    #element2 {
        background-color: #ff0000;
    }
</style>

<div id=container>
    <table cellspacing=0 cellpadding=0>
        <tr>
            <td id="element1">content</td>
            <td id="element2">content</td>
        </tr>
    </table>
</div>