html,
<div class="container">
<div class="inner-container">
<div class="box">a</div>
<div class="box">b</div>
<div class="box">c</div>
</div>
</div>
and the css,
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
text-align: center;
}
.container {
/* width = 200 * 3 + 25 * 2 = 650 */
float: left;
position: relative;
left: 50%;
}
.inner-container {
float:left;
position: relative;
left: -50%;
}
.container::after {
content: '';
display: block;
clear: both
}
.box {
float: left;
background-color: blue;
width: 200px;
height: 200px;
margin-right: 25px;
margin-bottom: 25px;
display: inline-block
}
.box:last-child {
margin-right: 0
}
this way, a b and c will retain its original width and height. When the container does not have sufficient width, c will go down, then b.