I'm designing a theme for a blog and I'm having some trouble trying to get a layout working. Here's an image of what I want.

This diagram represents the individual posts and not the website itself, so it will be contained in a box of it's own, lets call it .container. Also the purple and green are in another box, let's call it .content. The other elements will be called by their color for now.

so here's more or less what the CSS looks like:

.container { 
    display:block;
    margin:0 25px;
}

.gray, .blue, .content {
    display:block;
    width:100%;
}

.purple {
    display:inline-block;
    width:125px;
    height:100%;
    text-align:center;
}

.green {
    display:inline-block;
}

That's all there is at the moment. I tried float but that made no effect. What's happening is something like this.

Here's a few more things you should know:

• .container's width is NOT set it is auto
• .purple and .green don't necessarily need to be the same size as long as .green doesn't go to that side.
• .purple CAN have a set height
• .green is where the meat is, that's where the actual post goes, keep that in mind.
• I don't think tables will help, the problem is inside .content.