CODEWITHSUNDEEP
csshtmlcss-floatheight
ryanjohnsond
ryanjohnsond

Reputation: 503

Inner DIVs to fill height of Parent Div

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?

enter image description here

  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).

Upvotes: 4

Views: 16865

Answers (4)

JP Lew
JP Lew

Reputation: 4439

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/

mockup

Upvotes: 6

JP Lew
JP Lew

Reputation: 4439

I mocked up a solution on JSfiddle using simple percentages: http://jsfiddle.net/xLSQX/

mockup

Otherwise, as mentioned above pay attention to the overflow: attribute and clear: both.

I want all the divs inside the container to act like table cells and the outer div to act like the element. The height of the outer div to be flexible and adjust to the height of all the content inside the other divs. enter image description here

Upvotes: 0

mshsayem
mshsayem

Reputation: 18008

Possibly you have floats in the children divs. In that case you can do either of the followings:

  1. Add overflow:auto; to the parent div's style.
  2. Use CSS Clearfix
  3. Add another tag (last tag under the parent div) containing clear:both style like the answer above.

Upvotes: 1

David Zhan Liu
David Zhan Liu

Reputation: 484

try this 

  <div name="outer">
   <div name="inner>put your contents here</div>
   <div style="clear: both"></div> 
  </div>

you need a div that has the "clear:both" style (clear both simple makes the div takes up a entire line, nothing can float around it) at the very end of your inner divs so the outer div knows to extend to the end.

Upvotes: 2

Related Questions