This is what I'm trying to achieve:
![enter image description here](https://i.stack.imgur.com/PJ19P.jpg)

[So far, this is the code I have.](http://jsfiddle.net/sAw5B/1/)

The columns work like they should. The problem is that whatever I place after the columns in my HTML is actually behind the columns on the page, not beneath them like I want.

Would it be a problem with the css that I'm using for the "test-box" div?

```
.test-box{
    background:red;
    width:100%;
    height:300px;
}

```

Is there a better way of doing this?