Inner DIVs to fill height of Parent Div

css, css-float, height, html

Solution

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/

Problem

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? - 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? - As the innner content grows, the wrapper DIV (in red) will grow with it, and maintain its padding (just like a table would).

Original source