Make inner div equal height to outer div height

HTML & CSS
1

i searched alot but didn’t got the right way to do this.

http://moneyzzsharma.comze.com/

on this website there are there columns down of orange color.

col1 is float:left

col2 is float:left with 4% horizontal margin

col3 is float:right

please tell me how to make them of equal height(like col1 and col3 must be as longer as col2)

please avoid height:100% and also height:–PX as i don’t wanna have height of fixed size :slight_smile:

2

Here is how for ie8+ http://www.visibilityinherit.com/code/css3-equal-height-columns.php
Here is how for ie6+ http://www.visibilityinherit.com/code/eqaul-height-columns-withcss.php

3

Not good for me. this happens after doing that and margin was given afterwards but it was having no effect on it.
http://i48.tinypic.com/aw2ck9.jpg

One method is to make outer float and inner float but its not working. can you please tell how to implement this float method.
Thanks for the reply :slight_smile:

4

Hi,

For those three orange boxes I would just use display:table-cell as follows:


.cols{
display:table;
border-spacing:25px;
margin:20px 0;
}
.col1,.col2,.col3{
display:table-cell;
float:none;
padding:10px 0;
}
.fake_float{display:none}

The above will only work in IE8+. If you need to support IE7 then just re-instate the floated rules and let IE7 have the non equal floated approach instead.

Use conditional comments to target ie7 or use the ie7 *+html hack:


*+html .col1,
*+html .col2,
*+html .col3 {
float:left
}
*+html .fake_float{display:block}

/*etc.. and so on for any properties that were changed in the original rules.... */
5

Thanks it works, but i need to make it responsive and those border-spacing:–% does not work. please tell if any other method is there to do so( i had done before that method in which inner floating divs are made of same length,but i don’t remember that :frowning: )
btw thanks for diving :find: into my css code :slight_smile:

6

Percentages can’t be used on border-spacing so the only way to space them apart is to use pixels. However that wont really affect the responsiveness as the cells will shrink and grow as required but just that the space between them will not grow (which I find more appealing anyway).

There are a couple of other alternatives but they are more risky and more complicated.

1)You can use the massive padding bottom and massive negative margin technique where the three floats are contained with a parent that has overflow:hidden applied and then the columns will equalise. The downside is that any links in that section reached by a fragment identifier will break the page as it will scroll the content inside and become unreachable. If that’s not an issue for you then that method is ok in small doses.

  1. Use my absolute overlay technique but is very fiddly for three fluid columns.

Or there are things like flexbox but not ready for general use yet.

7

hey please check http://moneyzzsharma.comze.com/. 3 columns are made to be float left and the outer one is set to overflow:hidden but the length is still not same :frowning: (:

8

You would need to do add this (as I mentioned above) but you will lose the round corners at the bottom.


.col1,.col2,.col3{
padding-bottom:1000em;
margin-bottom:-1000em;
}

The display:table-cell approach is still the preferred method.

9

Thanks a ton paul for the discussion. i finally too realized that table-cell approach is best for it. thanks for the discussion :slight_smile: sitepoint is glad that you are here :slight_smile: