SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    make inner div equal height to outer div height

    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

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    .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:

    Code:
    *+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.... */

    [/code]

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

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

    Code:
    .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:

    Code:
    *+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.... */

    [/code]
    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 )
    btw thanks for diving into my css code

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by moneysharma View Post
    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 )
    btw thanks for diving into my css code
    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.

    2) 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. #7
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

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

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You would need to do add this (as I mentioned above) but you will lose the round corners at the bottom.

    Code:
    .col1,.col2,.col3{
    padding-bottom:1000em;
    margin-bottom:-1000em;
    }
    The display:table-cell approach is still the preferred method.

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The display:table-cell approach is still the preferred method.
    Thanks a ton paul for the discussion. i finally too realized that table-cell approach is best for it. thanks for the discussion sitepoint is glad that you are here


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •