Question

I have a two columns layout (fluid left, fixed right).
I want to put three divs in a row in the fluid column, so that they are centered in the wrapper while there is enough space and then they should align on the left.

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

.wrapper{
   width: 100%;
   margin: 0 auto;
    text-align:center;
}
.header{
   float: left;
   width: 100%;
   background-color: #f4f4f4;
    text-align:left;
}
.wrapleft{
   float: left;
   width: 100%;
   background-color: #cfcfcf;
    text-align:center;
}
.left{
   margin-right: 250px;
   background-color: #afeeee;
   height: 200px;
    text-align:right;
}
.right{
   float: right;
   width: 240px;
   margin-left: -240px;
   background-color: #98fb98;
   height: 200px;
}
.footer{
   float: left;
   width: 100%;
   background-color: #f4f4f4;
}
body {
   padding: 0px;
   margin: 0px;
}

.subwrapper div {
    height: 100px;
    width:200px;
    margin: 0 auto;
    text-align:center;
    color:white;
    display: inline-block;
    vertical-align:top;
    }
.subwrapper {
width:100%;
    background:purple;
    max-width:100%;
}

.first {
    background:blue;
}

.second {
    background:green;
}

.third {
    background:red;
}
​

Here is a jsfiddle that clarify what I mean http://jsfiddle.net/notme/SZjJG/
Actually I can get the first part, but I’m not able to align the divs on the left once there is no more space.
I can’t use a mediaquery, since the widths are dynamics.

UPDATE
I try to add some pics to make things clear.

Large resolution: the three divs are centered

Medium resolution: the three divs fit the width

Small resolution: the three divs should stay on the left side. I don’t want the left margin circled in yellow.

Answer 1

Try adding:

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

Also add to subwrapper:

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

You need to add the “display: block” and “margin: 0 auto”, for obvious reasons. However, “max-width” needs to equal the max width of the .first, second, and .third div’s together.

Once you add padding to the .first, .second, and .third div’s though, the widths will increase. Not sure if you knew that or not. So you might want to add “box-sizing: border-box;” to your .first, .second. and .third div’s CSS.

Example: http://jsfiddle.net/SZjJG/17/