Create a quad of squares inside a larger square...

Vote count:

0

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://ift.tt/1f3gi5Q"></div>
    <div class="inner-square"><img src="http://ift.tt/1f3gi5Q"></div>
    <div class="inner-square"><img src="http://ift.tt/1f3gi5Q"></div>
    <div class="inner-square"><img src="http://ift.tt/1f3gi5Q"></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;
}

asked 34 secs ago

webfrogs

429