1

First of all, hello all. This problem is driving me to insanity so I hope for a simple solution

Here is an image of what I wanted originally.

But I didnt want to use hacks to get Box 1 and (Box 2+Box 3) to expand with each other. So I will just use a background color on the wrapper instead so its not noticeable that they have different heights.

This is what I have now:

CSS

#wrapper {
    background:         #000;
    width:              50%; 
    float:              left;
}

#box1 {
    background:         #FF0012;
    width:              65%;
    float:              left;
}

#box2 {
    background:         #141; 
    width:              35%;
    margin-left:        65%;    
}


#box3 {
    background:#AA1232;
    width:              35%;
    margin-left:        65%;
}

HTML

<body>

 <div id="wrapper">

  <div id="box1">

  </div>

  <div id="box2">

  </div>

  <div id="box3">

  </div>

 </div>

</body>

If you wonder why I dont use float: right; on Box 2 and 3 its because if Box 1 is lower than Box 2 then Box 3 will float under Box 1 instead of under Box 2.

Problem: 1. Fix Box 3 to the bottom of the wrapper 2. When rows are inserted in Box 3 and Box 2, they shouldn't overflow - expand the wrappers height instead (as it does with the code i posted)

If I use position: absolute; bottom: 0; on Box 3 then it will overflow Box 2 when rows are inserted and Box 3 gets too heigh.

Any ideas of how to solve this?

Gumbo
  • 643,351
  • 109
  • 780
  • 844
mdc
  • 1,161
  • 6
  • 22
  • 37

1 Answers1

1

I know why it drives you crazy - you are trying to solve table problem by un-table means. Why?

I tought myself to recognize table functionality: when I want independed pieces of content to share a common vertical and horizontal edge, it usually means I want a table.

Edit: to achieve that using table you need to 1) use rowspan to make box 1 span two rows and 2) vertically align contents of box 3 to make sure it is always at the bottom.

See, for example, the HTML that illustrates rowspan here. It is almost what you want, just get rid of table borders and add valign="bottom" to the third cell.

buti-oxa
  • 11,261
  • 5
  • 35
  • 44
  • I like to stay away from tables as much as the next guy for layout, but the requirements of this question require a table. – Ryan Florence Jun 16 '09 at 23:42
  • Well, as Im new to this I havnt used tables for structuring a site before. What would the code look like that make a table do what I want? ( With Box3, or table cell 3, always is pushed towards the bottom when content is added in either table cell 1 or 2 ) – mdc Jun 17 '09 at 00:16
  • HTML property of cell valign="bottom" takes care of that. – buti-oxa Jun 17 '09 at 00:28
  • Since this is not tabular data, a table shouldn't be used according to The Law, but because those CSS folks failed to give us a way to easily do grid layouts, fsck it! Use a table. (though I hope somebody have a better solution) – Jacob Jun 17 '09 at 00:51
  • Thanks for answering to all. Are there any common problems using a table that I should know about (seeing as everybody hates them so much)? E.g. Will it validate fine? Can I have DIVs in each cell? Other troubles I might run into? – mdc Jun 17 '09 at 01:42
  • One more thing. I added valign="bottom" to the third cell. It works except for one case. When Cell 1 contains many more rows than the others. I need Cell 3 to only be as "high" as it has rows. I uploaded an image of the scenario here: http://img189.imageshack.us/img189/5066/tabletest.png In other words: Cell 3 should be the smallest cell in this scenario. Is it fixable? – mdc Jun 17 '09 at 02:07
  • That is why I told you to get rid of table borders. Your content is placed correctly, so if box 1 is higher than box 2 plus box 3, who cares where the white space goes? If you have to have borders, put a div in each cell and border then. I guess you can get exactly the original picture by completely bordering box 1, not bordering box 2 and having all but left borders on box 3. – buti-oxa Jun 17 '09 at 04:50
  • As to table hate, read, for example, this SO discussion: http://stackoverflow.com/questions/313468/why-is-using-tables-for-website-layout-such-an-evil. – buti-oxa Jun 17 '09 at 04:52
  • I understand. I put a div in each cell and now its exactly as I want it. Thank you. I wasted SO much time trying to get the DIVs to work. – mdc Jun 17 '09 at 21:13