Q: Setting margins in percentage I have this code which works nicely the only thing that I can't figure out is to get the spacings equal between all the squares.  Maybe the code explains it better then words. And here is a mockup with fixed pixel layout of 1465px width, as a example. Mockup site
<div class="Content">
  <div class="ContLft">
    <div class="itemXL">
      <div class="itemXLcnt"></div>
    </div>
  </div>
  <div class="ContRght">
    <div class="itemL">
      <div class="itemLcnt"></div>
    </div>
     <div class="itemL">
      <div class="itemLcnt"></div>
    </div>
     <div class="itemL">
      <div class="itemLcnt"></div>
    </div>
     <div class="itemL">
      <div class="itemLcnt"></div>
    </div>
  </div>
</div>

/css/
.Content {
display: block;
width: 100%;
}

.ContLft {
float: left;
margin-right: 1.37305%;
width: 48.6269%;
}

.ContRght {
float: left;
width: 50%;
}

.itemXL {
background-color: #f4f4f4;
margin-bottom: 24px;
margin-right: 24px;
padding: 24px;
position: relative;
width: 100%;
}

.itemXL:before{
content: "";
display: block;
padding-top: 100%;  /* initial ratio of 1:1*/
}

.itemL::before {
content: "";
display: block;
padding-top: 100%;
}

.itemL {
background-color: #f4f4f4;
float: left;
margin-bottom: 2.7461%;
margin-left: 2.7461%;
padding: 24px;
width: 47.2539%;
}

.itemLcnt {
position:relative;  
}

.itemXLcnt {
position:relative;
}


A: A few things:


*

*As Drew points out, your markup is missing a closing tag for the div.

*You need to use right margin on your smaller items

*Those smaller items are too wide which is forcing them to wrap each one to a new line instead of the look you want.

*Probably something else but it's just easier to paste it working. :-P


Divs: 
<div class="Content">
  <div class="ContLft">
    <div class="itemXL">
      <div class="itemXLcnt"></div>
    </div>
    </div>
  <div class="ContRght">
    <div class="itemL">
      <div class="itemLcnt"></div>
    </div>
     <div class="itemL">
      <div class="itemLcnt"></div>
    </div>
     <div class="itemL">
      <div class="itemLcnt"></div>
    </div>
     <div class="itemL">
      <div class="itemLcnt"></div>
    </div>
  </div>
</div>

Styles:
.Content {
     display: block;
     overflow: auto;
     width: 100%;
}

.ContLft {
     float: left;
     margin-right: 1.37305%;
     width: 48.6269%;
}

.ContRght {
     float: left;
     width: 50%;
}

.itemXL {
     background-color: #F4F4F4;
     margin-bottom: 24px;
     margin-right: 24px;
     position: relative;
     width: 100%;
}

.itemXL:before {
     content: "";
     display: block;
     padding-top: 100%;
}

.itemL:before {
     content: "";
     display: block;
     padding-top: 100%;
}

.itemL {
     background-color: #F4F4F4;
     float: left;
     margin-bottom: 2.7461%;
     margin-right: 2.7461%;
     padding: 24px;
     width: 38.5%;
}

.itemLcnt {
     position: relative;
}

.itemXLcnt {
     position: relative;
}

Music (fiddle joke?): http://jsfiddle.net/bbvqofuq/
P.S. You might want to come up with a more consistent width setting. The percentages are going to cause it to jump around. Take a page (website joke?) from the example you provided and fix your widths for your elements or set them in a different manner. If you play with the fiddle I linked to and expand and contract the width of the result pane, you will see what I am talking about.

A: I got it, you can check it here jsfiddle.net/SanMoll/5egfry4h. I forgot that you have to subtract the margins from the width of the div's. The trick is simple 2 divs at 50% in a containing div at 100%, then the content divs nested in those 50% divs; the big one has a size of 96% and margin of 2% while the left square content divs have a width of 46% and allso a margin of 2% (50% minus 2x2%=46%). 
But in the end you have scalable proportional squares, wich I like!
