Create a quad of squares inside a larger square

Question

Hopefully, this image will explain what I'm trying to do... in CSS...

Ive managed to complete almost all of this. Here's a Fiddle, displaying what I've got so far... unfortunately, I cannot seem to place the squares side by side (tried float), and instead, they're appearing in a vertical column.

Any suggestions?

HTML...

<div class="content-container">
    <div class="inner-square"><img src="http://placehold.it/230x230"></div>
    <div class="inner-square"><img src="http://placehold.it/230x230"></div>
    <div class="inner-square"><img src="http://placehold.it/230x230"></div>
    <div class="inner-square"><img src="http://placehold.it/230x230"></div>    
</div>

css...

.content-container {
    max-width: 570px;
    height: auto;
    border-radius: 10px;
    border-top: 50px solid #e81354;
    background: #ffffff;
    display: block;
}

.inner-square {
    background: #cccccc;
    width: 50%;
    height: 50%;
    margin: 5px;
}

Answer 1

Your problem is you set the width to 50% but not minus the 10px margin, also your HTML code has line breaks between the divs, so you should set the font-size to 0 for the container (to eliminate the 4px of the line break):

.content-container { 
  ...
  font-size:0;
}
.inner-square {
  background: #cccccc;
  width: calc(50% - 8px);
  height: calc(50% - 8px);
  margin: 5px;    
  display:inline-block;
}
.inner-square:nth-child(even) {
  margin-left:0;
}
.inner-square:nth-child(n+2) {
  margin-top:0;
}

Demo.

Answer 2

Two problems:

1. You need to add float:left to .inner-square.
2. Your squares aren't taking the form you want because you have a margin: 5px on .inner-square. So, your .inner-square widths are currently 50% + 50% + (4*5px). Because these are bigger than the width of your box, the second square takes the next available space: the space underneath. So, try margin: 5px 0 and your problem goes away.

Answer 3

i found this code lined them up best i would put the style into the css in final copy tho <div class="content-container"style="position:absolute;"> <div class="inner-square"><img src="http://placehold.it/230x230"></div> <div class="inner-square"><img src="http://placehold.it/230x230"></div> <div class="inner-square"style="float:right;margin-top:-478px;"><img src="http://placehold.it/230x230"></div> <div class="inner-square"style="float:right;margin-top:-239px;"><img src="http://placehold.it/230x230"></div>
</div>