CODEWITHSUNDEEP
htmlcssuser-interfacelayout
Sam Murray-Sutton
Sam Murray-Sutton

Reputation: 1459

Make an element centred when it is alone, but aligned to the right when with another element

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>

Upvotes: 2

Views: 273

Answers (4)

Reputation:

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>

Upvotes: 0

Bill the Lizard
Bill the Lizard

Reputation: 405965

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.

Upvotes: 2

Steve Clay
Steve Clay

Reputation: 8781

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.

Upvotes: 0

philnash
philnash

Reputation: 73065

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.

Upvotes: 5

Related Questions