4 divs and need to center 2 center divs - html

Question

I have four divs inside a container like this:
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
I would like to keep the first and last div aligned to the edges of the screen and only center the two divs in the middle. I tried display inline block and adjusting the margins, but i just can't figure it out. Please try and enlighten me!
Kind Regards

Answer 1

Use this HTML
<div class="container">
<div class="block left">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block right">4</div>
</div>
and then this CSS
.container {
display:block;
text-align:center
}
.block {
display:inline-block;
border:1px solid #000;
padding:10px;
margin:auto
}
.left {
float:left
}
.right {
float:right;
}
you can also use first-child and last-child, but it's easier to add a class to first and last div
See fiddle here

Answer 2

Try using :nth-of-type() pseudo-class allows you to select elements with a formula,like this: http://jsfiddle.net/csdtesting/11fh7suy/
//second div
div.container div:nth-of-type(2) {
background-color: #9999ff;
text-align:center;
}
//third div
div.container div:nth-of-type(3) {
background-color: #9999ff;
text-align:center;
}
Hope it helps!

Answer 3

Adding an extra container will give you more control:
<div class="container">
<div class="block">1</div>
<div class="wrap">
<div class="block">2</div>
<div class="block">3</div>
</div>
<div class="block right">4</div>
</div>
.wrap{width:50px;margin:0 auto}
.block{float:left;width:25px;text-align:center}
.right{float:right}