Css 处理流体布局上的水平对齐

我有两列布局（流体左侧，固定右侧）。
我想把三个div放在流体列的一行中，这样它们在包装器中居中，同时有足够的空间，然后它们应该在左侧对齐

<div class="wrapper">
Wrapper
<div class="header">
         header
</div> 
<div class="wrapleft">       
    <div class="left">
        <div class="subwrapper">
            <div class="first">Once this reach the left border, it should stay there.</div>
            <div class="second">This one should go under the blue div when there is not enough space for two divs and stay left aligned.</div>
            <div class="third">This one should go under the blue div when there is not enough space for three divs and stay left aligned.</div>
        </div>
    </div>
</div>    
<div class="right">
        right
</div> 
    <div class="footer">
        footer
    </div>     

这里有一个jsfiddle来阐明我的意思
实际上，我可以得到第一部分，但一旦没有更多的空间，我就无法对齐左侧的div。
我不能使用mediaquery，因为宽度是动态的

更新
我试着添加一些图片来让事情变得清楚

大分辨率：三个div居中

中等分辨率：三个div适合宽度

小分辨率：三个div应保持在左侧我不希望左边空白处用黄色圈起来
尝试添加：

.first, .second, .third {
    float:left;
}

还要添加到子包装器：

max-width: 600px;
display: block;
margin: 0 auto;

出于明显的原因，您需要添加“显示：块”和“页边距：0自动”。但是，“最大宽度”需要等于.first、second和.third div的最大宽度

但一旦将填充添加到.first、.second和.third div，宽度就会增加。不知道你是否知道。因此，您可能需要将“框大小：边框框；”添加到.first、.second中。第三组的CSS

---

示例：

我不确定你的要求是什么，但如果我理解正确，它正在做你想做的事情。它没有。我试着放一些图片来让一切变得更清晰。使用float left，我得到了小分辨率的正确布局，但是div没有与大的居中。为答案添加了解释。

max-width: 600px;
display: block;
margin: 0 auto;