Question

Possible Duplicate:
Make Div on right side fill out all available space

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.

Answer 1

Use answers in this post to get a solution:

Make Div on right side fill out all available space

I am recommending tables-directed one because it is most valid/working approach on almost every browser.