Question

I’m looking to have a div aligned left (Div 1) and a div aligned center (Div 2).

When the user resizes the window, the centered div (Div 2) should stay centered until it bumps into the edge of Div 1.
Div 2 (centered div) should not always be docked left unless the width of Div 1 (left div) plus half the width of Div 2 is greater than half the browser width.

Any thoughts on making this happen without javascript?

Here is a working example to work from: http://jsfiddle.net/pjg8D/9/

<div id="fixedBar">
    <div id="div1"></div>
    <div id="div2"></div>
</div>


<!-- http://i42.tinypic.com/iqv5tu.jpg -->

#fixedBar {
    height: 50px;
    width: 100%;
    background: #f99;       

}

#div1 {
    width: 200px;
    height: 50px;
    background: green;
    float: left;
}

#div2 {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background: blue;
}

Answer 1

The solution to the question is to use min-width on the container div. The ratio for this width is calculated as follows: ( Div1 Width + half of Div2’s Width ) x 2.

The solution is here: http://jsfiddle.net/pjg8D/16/