Is there a way to have elements be positioned to the right without removing them from the flow?

Question

I have a div with some inline elements inside it. I want to put one of the elements on the left and the rest over on the right:

+---------------------------+         


        

Answer 1

For the record, there is a better (at least in my eyes) way of doing this than float-happy clearfixing. Use display: inline-block. The downside? IE7 doesn't support it (of course). The below works, though, in IE8 and above and Chrome, Firefox and Opera.

NOTE: I've simplified the demo's CSS in an attempt to dispel perceptions this is complicated. It's not. The display: inline-block is the only part you need; the rest is part of the attempt to match what the OP described in the question's depiction.

    
A
    
B
    
C


#container {
    background: #ffffd;
    text-align: center;
}
#container > div {
    background: #cff;
    display: inline-block;
    padding: 2%;
    height: 100px;
    width: 25%;
}
#container #a {
    height: 30px;
    margin: 0 10% 0 0;
}

http://jsfiddle.net/AZJzz/4