Question

I am about to build a grid like this:

                       <- 100px ->
       +---------------+---------+ -
       | contentbox    | Right   | |
     - +---------------+     box | | 80 %
25px | | bottombox     |         | |
     - +---------------+---------+ -
       <--------- 80 % ---------->

My current problem is to build this flexible. The box itself have a size of 80% of the width of the users browser window. Contentbox should be able to adjust itself accordingly, all the other boxes is somewhat fixed sized.

How can I achieve this?

I have tried doing it like this with tables:

<table width="80%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>content content content content content content content content content content content content content content content content content content</td>
    <td width="200" rowspan="2">rightbox<br />
    rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox<br />
rightbox</td>
  </tr>
  <tr>
    <td height="25">bottombox</td>
  </tr>
</table>

But it seems like that no matter what I do, the bottombox will always get half the height of the rightbox.

But I would prefer doing it with divs.

Answer 1

Here is a something like what you need: http://jsfiddle.net/kizu/zLGez/

If you need equal columns or have other requirements — update your question and I’ll update my answer 🙂