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?

Question

The problem:

We have a page that ordinarily has two elements arranged 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>

Despite exploring a few angles for this, we can't seem to make it work. We're not averse to using JS, it just feels that a css based solution ought to be possible.

Can you think of a way of using just css(and possibly extra markup if definitely necessary) to make element 2 center when it appears on its own?

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.

Answer 2

A strict CSS2 solution:

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

The inner elements should layout like inline text inside #container, but remain blocks inside.

This is standard CSS, but getting browser support might take some trickery.

Answer 3

it's not cool solution becouse tables are not "trendy" anymore but it solves the problem completly (under all ie)

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

Answer 4

I think Phil was on the right track, but you should try using the CSS last-child pseudo-class. As far as I know, first-child and last-child are the only way in CSS to approximate an if construct.

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

The CSS above basically says "if element2 is the last child element of its parent use this set of styles, otherwise use these other styles.

This should even work in IE7.