responsive layout

by stackmanoz

HTML

<section class="container">
<div class="span4"></div>

<div class="span8"></div>

</section>
<section class="container">
<div class="all-spans">
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
</div>
</section>

CSS

.container
{
margin:0 auto;
background:#ddd;
position:relative;
width:80%;
min-height:100%;
border:1px solid #ddd;
padding:10px;
min-width:323px;
clear:both;


}
.span4
{
clear:both;
border:1px solid #111;
height:150px;
width:48%;

display:inline-block;
min-width:323px;
}
.span8
{
clear:both;
position:relative;
border:1px solid #111;
height:150px;
width:48%;

display:inline-block;
min-width:323px;


}
.all-spans
{
display:inline-block;
}
.span1
{
width:80.75px;
height:150px;
display:inline-block;
border:1px solid #111;
}