Place three DIV boxes horizontally and centered - css

Question

I'd like to place three DIV boxes horizontally and centered. If i resize (narrower) the browser boxes should take place vertically and centered.
----BrowserWide-----
______X X X______
----BrowserWide-----
----BrowserNarrow-----
________X_________
________X_________
________X_________
----BrowserNarrow-----
This is my html:
<div class="premium_features">
<div class="premium1">
<h2>Some Heading</h2>
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
<div class="premium2">
<h2>Some Heading</h2>
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
<div class="premium3">
<h2>Some Heading</h2>
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
</div>
This is my css:
.premium1 {
background: url("4.png") no-repeat top center;
padding-top: 95px;
float:left;
width: 33%;
min-width: 300px;
max-width: 320px;
text-align:center;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.premium2 {
background: url("5.png") no-repeat top center;
padding-top: 95px;
float:left;
padding-top: 95px;
float:left;
width: 33%;
min-width: 300px;
max-width: 320px;
text-align:center;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.premium3 {
background: url("6.png") no-repeat top center;
padding-top: 95px;
float:left;
width: 33%;
height: 100px;
min-width: 300px;
max-width: 320px;
text-align:center;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.premium_features {
width: 75%;
margin-left: auto;
margin-right: auto;
}
With this code: It is OK when it is wide and when it is narrow.
But during resize 2 of 3 boxes are staying at the same block for a while. I need to sort them vertically when resizig starts.
Thanks for help.

Answer 1

There are many ways to centre elements:
Margin way:
With a set width or display: inline-block; you can use:
margin-left: auto;
margin-right: auto;
text-align way:
With a set width or display: inline-block; you can add this to the parent:
text-align: center;
Absolute way:
position: absolute;
left: 50%;
margin-left: width/2;
or
position: absolute;
left: 50%;
transform: translate(0, -50%);
Also don't worry too much about ie7 and below as the the majority of people use higher versions of ie or a different browser though this should work up until ie6

Answer 2

Place your three divs within one large div and style that div
#largeDiv{ margin : 0 auto 0;}

Answer 3

I'm assuming this is what you meant:
HTML:
<div id="longone">long one</div>
<center>
<div id="box"><img src="http://placehold.it/100x100"></div>
<div id="box"><img src="http://placehold.it/100x100"></div>
<div id="box"><img src="http://placehold.it/100x100"></div>
</center>
CSS:
#longone
{
display: block;
width: 100%;
border-bottom: 1px solid black;
}
#box
{
display: inline-block;
width: 100px;
}
http://jsfiddle.net/R9ENg/
Although, personally, I'd use <ul>s and <li>s.

Answer 4

Are you looking for something like this?
http://jsfiddle.net/a2cPu/
HTML
<div class="container-wrapper">
<div class="container-1"></div>
<div class="container-2"></div>
<div class="container-3"></div>
</div>
CSS
.container-wrapper {
text-align:center;
}
.container-1, .container-2, .container-3 {
width:200px;
height:200px;
display:inline-block;
margin-left:-4px;
}
.container-1 {
background:red;
margin-left:0;
}
.container-2 {
background:green;
}
.container-3 {
background:blue;
}
#media all and (max-width: 650px) {
.container-1, .container-2, .container-3 {
width:100%;
display:block;
margin:0;
}
}

Answer 5

you can use mediaqueries and test screenwidth to apply different style :
example mediaquerie + display:flex;
demo: http://codepen.io/anon/pen/qmFlt/
#container {
display:flex;
flex-direction:row;
justify-content:center;
}
#container div {
width:200px;
height:100px;
background:gray;
margin:auto 1em;
}
/* next block, #media, can be clone to set other media queries */
#media only screen
and (max-width : 800px) {/* under 800px width , this CSS is overriding precedent rules */
#container {
flex-direction:column;
}
#container div {
margin:1em auto;
}
<div id = "container">
<div>box
</div>
<div>box
</div>
<div>box
</div>
</div>
You can do it setting display:inline-block / block the #container div and drop the display flex rules for #container, keep margins for the 3 div .
demo: http://codepen.io/anon/pen/utflx/