Posição de Div

Bom em gostaria de posicionar as 4 primeiras divs uma do lado da aoutra e as outras quatro em baixo das quatro primeiras div

O código que tenho:

• CSS

.content #box-featured{

width: 780px;
margin: 0 auto;
background-color: #FFFFFF;
background-blend-mode: color;
}

.content #featured1{

width: 160px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 17.5px;
padding-right: 17.5px;
background-color: #FFFFFF;
float: left;
}

.content #featured2{

width: 160px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 17.5px;
padding-right: 17.5px;
background-color: #FFFFFF;
float: left;
}

.content #featured3{

width: 160px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 17.5px;
padding-right: 17.5px;
background-color: #FFFFFF;
float: left;
}

.content #featured4{

width: 160px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 17.5px;
padding-right: 17.5px;
background-color: #FFFFFF;
float: left;
}

.content #featured5{

width: 160px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 17.5px;
padding-right: 17.5px;
background-color: #FFFFFF;
float: left;
}

.content #featured6{

width: 160px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 17.5px;
padding-right: 17.5px;
background-color: #FFFFFF;
float: left;
}

.content #featured7{

width: 160px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 17.5px;
padding-right: 17.5px;
background-color: #FFFFFF;
float: left;
}

.content #featured8{

width: 160px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 17.5px;
padding-right: 17.5px;
background-color: #FFFFFF;
float: left;
}

• HTML

<div id="box-featured">
<div id="featured1">
<p><a href="#">featured</a></p>
</div>
<div id="featured2">
<p><a href="#">featured</a></p>
</div>
<div id="featured3">
<p><a href="#">featured</a></p>
</div>
<div id="featured4">
<p><a href="#">featured</a></p>
</div>
<div id="featured5">
<p><a href="#">featured</a></p>
</div>
<div id="featured6">
<p><a href="#">featured</a></p>
</div>
<div id="featured7">
<p><a href="#">featured</a></p>
</div>
<div id="featured8">
<p><a href="#">featured</a></p>
</div>
</div>

Eu gostaria de manter o background da "box-featured" em relação com as outras divs..