Question

We have a page that ordinarily has two elements arranged side-by-side. Despite exploring a few angles for this, we can’t seem to make it work. We’re not averse to using JavaScript, it just feels that a CSS based solution ought to be possible. Is there a way of using just CSS (and possibly extra markup if necessary) to make element2 centre when it appears on its own?

Examples

Sometimes we have two elements, side by side.

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

But in some conditions only element2 is on the page e.g.:

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

Answer 1

There is a pure css solution, however it won’t work in versions of IE less than 7 because it won’t understand the sibling selector (+), for that you may want to consider a JavaScript solution (perhaps Dean Edwards’ IE7). Anyway, some example css:

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

The key is the line div#element1 + div#element2 which selects div#element2 given that it directly follows div#element1.