How to put some div in row - html

Question

I have some problems with my markup. So, I have HTML:
<div id="wrapper">
<div id="content">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
And CSS:
#wrapper {
margin: auto;
margin-top: 10px;
width: 80%;
}
.item {
float: left;
margin: 0;
width: 320px;
height: 200px;
}
I suppose that .item divs must be centered in parent #wrapper and #content divs due margin:auto property, but it's doesn't work. How I can solve this problem?

Answer 1

You have to control it by using media-queries for different resolutions.
Your html:
<div id="wrapper">
<div id="content">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
css:
#wrapper {
margin-top: 10px;
width: 100%;
}
#content{
width:80%;
margin:0px auto;
}
.item {
float: left;
margin: 0;
background:blue;
border:1px solid #000;
width: 200px;
height: 200px;
}
See the demo
For different resolution you have to add media queries and define wrapper width and content width according to them.
#media only screen and (min-width: 768px) and (max-width: 1024px) { … }
#media only screen and (max-width: 768px) { … }
Hope it will help.

Answer 2

Real cause of your problem is- float left of .item div. If you remove float:left property than they take auto margin.
You want to have your .item div centered, not pushed to the left side.
Now that gives you trouble probably, because things don't work out as you'd want them to, because every element you have there, is floated to the left.
You can try for this :
HTML:
<div id="wrapper">
<div id="content">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
CSS:
#wrapper {
margin-top: 10px;
width: 80%;
border:1px solid black;
}
.item {
margin: auto;
width: 320px;
height: 200px;
border:1px solid black;
}
Try This

Answer 3

you can simply use display:inline-block instead of float:left :
#wrapper {
margin: auto;
margin-top: 10px;
width: 80%;
text-align:center;
}
.item {
display:inline-block;
margin: 0;
/* width: 320px; /* not required, you can let width:auto */
height: 200px;
text-align:left;
}

Answer 4

#content{overflow:hidden;}
or
#wrapper{overflow:hidden;}
You have div's with "float:left" but parent hasn't 'haslayout' property