Aligning Div Blocks in a container - html

Question

I'm currently designing a dashboard and I'm looking for a good/right way to align multiple divs in a container. I want the divs taking up maximum space left and right with the right margins .
<div class="wrapper">
<div class="container">
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
</div>
</div>
.container {
margin: 15px;
}
What is the best way to achieve this?

Answer 1

The easiest way would be to use display and the table-layout properties :
http://jsfiddle.net/3Q4qv/
.wrapper {
border:solid;
display:table;
border-collapse:separate;
border-spacing:15px;
/* give it width if you wish */
}
.container {
display:table-row;
}
.container > div {
display:table-cell;
border:solid;
/* let's give a min size since it is empty */
height:2em;
min-width:2em;
}
you can even make a mix with padding and border-spacing : http://jsfiddle.net/3Q4qv/1/
.wrapper {
border:solid;
display:table;
border-collapse:separate;
border-spacing:5px;
padding:10px;
}

Answer 2

Check out this JSFiddle: http://jsfiddle.net/4Y3jS/3/ You should set a specific width on your container class, and then float each of the inner divs left.
HTML:
<div class="container">
<div class="box-1"><img style="width:50px; height: 50px; " src="http://www.mlahanas.de/Greeks/images/sq1.jpg"></img></div>
<div class="box-2"><img style="width:50px; height: 50px; " src="http://www.mlahanas.de/Greeks/images/sq1.jpg"></img></div>
<div class="box-3"><img style="width:50px; height: 50px; " src="http://www.mlahanas.de/Greeks/images/sq1.jpg"></img></div>
<div class="box-4"><img style="width:50px; height: 50px; " src="http://www.mlahanas.de/Greeks/images/sq1.jpg"></img></div>
</div>
CSS:
.container {
width: 300px;
}
.box-1, .box-2, .box-3, .box-4 {
float: left;
padding: 0 2px;
}

Answer 3

Use any width in your container like:
.container {
width: 400px;
}
Then you can set the style for all elements inside. Look that if you want to add border at the elements, try to use the box-sizing property.
.box {
width: 21%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
margin: 0 2%;
}

Answer 4

Try something like this: JSFiddle
Basically floating the blocks and letting their width be determined by a percentage of the parent (up to 25% since there are 4 - notice that I used only 23% and then I placed a 1% margin around all blocks giving you a 2% space between any two blocks -- adjust these numbers as you see fit).
.container {
margin: 15px;
}
.box {
float: left;
width: 23%;
margin: 0 1%;
}
<div class="container">
<div class="1 box"></div>
<div class="2 box"></div>
<div class="3 box"></div>
<div class="4 box"></div>
</div>
If you don't want space between the boxes, this approach really shines - use width:25%; margin: 0;
Alternatively, you could use display: inline-block;
<div class="wrapper">
<div class="container">
<div class="1 box"></div><!--
--><div class="2 box"></div><!--
--><div class="3 box"></div><!--
--><div class="4 box"></div>
</div>
</div>
.box {
display: inline-block;
width: 25%;
margin: 0;
}