SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2007
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 Equal-Height Columns CSS Liquid Layout

    Found a couple techniques that work with le Fox, but they don't hold up in IE. Before I set off yet again, I thought maybe someone had some advices!
    Patriotism is the virtue of the vicious.

  2. #2
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    your question is too short and incomplete to picture what ur askng but i guess ur 3 column are not coming equal in IE compared to FF, try giving ur div (he columns height)
    All those who wander aren't lost.

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2007
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's hard to explain, and I don't wanna do a pic. Like this - http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm

    No fixed height, columns are liquid horizontally and vertically.

    Nice one PMOB, ALA and many others failed me here.
    Patriotism is the virtue of the vicious.

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I always fall back to this: http://www.cssplay.co.uk/layouts/3cols2.html

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Is your objection because of the lack of support for IE mac?

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2007
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh my clorets, that's the lightest weight code I've seen yet, and more importantly it doesn't go straight to hell in IE7.
    I haven't taken a good look yet, but it looks great so far!
    Thanks.

    edit - no IE7 PC. It's surprising how many of the techniques don't hold in IE7

    edit-edit- The thing about Paul's is it has the added bonus of a minimum heightof 100% as well.
    Patriotism is the virtue of the vicious.

  7. #7

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2007
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll stick with that one I think. I've sort of got it working, I like it's recursiveness and it's pretty lightweight code. I tried three separate times (I'm putting it in a WP child, all php function calls to get pages and it calls the two sidebars simultaneously, had to separate them)

    Anyway, for some reason every single time, and I'm not exactly sure when, I'm exceptionally careful about migrating my site into the setup (right down to using your class and id names), if my right col is the longest, the footer is into it's padding and I lose my centering. No biggie, I'm just gonna justify my footer left for now. This is irking me fiercely, and I'd be totally lost without firebug to analyze the rendered page (which is composed of like 4 different files or something gross).

    It's all good and then falls apart again in IE when I try to wrap the entire site, another thing I'm going to back burner. I just want to get this functional and up before I start obsessing really hard!
    Patriotism is the virtue of the vicious.

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

    If you are using the 100% height method then you won't be able to wrap another wrapper because you can't base another nested element on an element that is min-height:100%. Only one element can ever carry the full height because nested elements will collapse to height:auto. You can't use height:100% afain either because that means that the element can never grow. Read the faq on 100% height if I didn't make that clear enough

    This is quite quite tricky as everything has to be done on that one element.

    If you want some help debugging the problem then we'd need to see the code or a link etc. If the footer overlaps then it will be a logic error somewhere and shouldn't be too hard to spot.


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
  •