Inner DIVs to fill height of Parent Div

Question

Sorry. I had to edit my question: I made the second image in Photoshop.

**I am trying to find a DIV equivalent to a Table. How do you get divs to behave like TDs: All TDs adjust their height as the content grows, and all TDS have the same height to the bottom of the Table element. ** Why is this so hard with DIVs? After all these years, is'nt there a standard solution?

1. How do you get the two column divs to always be the same height (or always go down to the bottom) of the container DIV?
2. As the innner content grows, the wrapper DIV (in red) will grow with it, and maintain its padding (just like a table would).

Answer 1

yeah, your concept appears really tough to accomplish in CSS alone, for some reason. JQuery could handle it a lot better if you're open to it.

At any rate, here is is another alternative. It uses a clever trick as follows:

#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }

Check it out here: http://jsfiddle.net/jplew/yPMVJ/