The desired layout can be achieved in various ways depending on the structure of your HTML code.
Using float:
<tag left :floatleft />
<tag right :float:right/>
<tag center :margin:auto/>
Utilizing display:flex;
<parent
style="display:flex;justify-content:space-between;">
<child left />
<child center />
<child right />
</parent>
By using @media queries, you can change the layout from rows to columns when the width is insufficient for all three elements: DEMO
section {
display:flex;
justify-content:space-between;
}
article {
width:292px;
background:green;
}
@media all and (max-width:900px) {
section {
flex-direction:column ;
}
article {width:100%;
}
}
<section>
<article> 292px width</article>
<article> 292px width</article>
<article> 292px width</article>
</section>
Alternatively, using display:inline-block:
<parent
style="text-align:center">
<child left style="display:inline-block"/>
<child center style="display:inline-block"/>
<child right style="display:inline-block"/>
<pseudo-tag style="display:inline-block;width:100%"/><!--this can be either a pseudo element or a neutral tag in HTML to enhance compatibility for IEs<8 -->
</parent>
For easy implementation and resizing of three boxes with 292px width, check out this CodePen: http://codepen.io/gc-nomade/pen/nrbDl