CSS - Box positioning

Question

I'm trying to create a layout like the image below, but the only thing I get is one row with all my boxes. I really want to keep this layout tableless, so after hours of being puzzled and researching, I'm opening my question here.

Since I can't post images, here's what I'm trying to do with CSS boxes.

    |  |[ ] [ ]
    |  |[ ] [ ]

Description: One big box at left which's the height of two little boxes. And four little boxes next to each other.

This is the CSS code of the biggest one:

.box {
    width:28%;
    background:#f2f5f6;
    border: 1px solid #c3d1d6;
    font-family: Lato,sans-serif;
    padding: 1.1em;
    margin: 0.5em 0.5em 0.5em 0;
    display: inline-block;
}

Thank you very much for your help!

Answer 1

There are a few ways you can achieve this. One of the easiest is with floats.

Have a fiddle!

HTML

<div id="wrap">
    <div class="left"></div>
    <div class="box"></div>
    <div class="box color"></div>
    <div class="box color"></div>
    <div class="box"></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
}
#wrap {
    height: 100%;
    width: 300px;
    margin: 0 auto;
}
.left {
    float: left;
    height: 100%;
    width: 33%;
    background: #F00;
}
.box {
    height: 50%;
    background: #FF0;
    width: 33%;
    float: left;
}
.color { background: #000; }

Answer 2

You can use display: table.

You would wrap all those cells into a container and set the container to display: table and then apply display: table-cell to all interior elements you want to behave this way.

This is a better alternative to actual tables because it allows you to style it with CSS. I've used this method several times in responsive designs to keep the sidebar the same height as the content.

Do keep in mind that this slightly changes the behavior of margin and padding, so you might have to play around with it for a bit.