www.webdeveloper.com
Results 1 to 15 of 15

Thread: 3 Column Layout, Height Problem

  1. #1
    Join Date
    Sep 2003
    Location
    Seattle
    Posts
    159

    3 Column Layout, Height Problem

    I'm trying to change my site (link in sig) to an expandable one to fit the width of a browser. I've accomplished this part already and am satisfied with the result. However, the 3 columns do not extend all the way to the bottom of the page like I want them to.

    http://www.tom-wallace.com/2.php

    I've removed all the irrelevant code from this page to help with diagnosing the problem.

    A related problem is if I have very little content in the center column, I'll still get a vertical scroll bar, as shown here:

    http://www.tom-wallace.com/1.php

    On the bright side, the problem is identical in IE, Mozilla and Opera, so my hope is that one fix will fix them all.

  2. #2
    Join Date
    Aug 2003
    Posts
    1,576
    That is a one column layout... take a look at faux columns

  3. #3
    Join Date
    Sep 2003
    Location
    Seattle
    Posts
    159
    True only one column will have content. My current layout already takes advantage of the faux columns idea. The downside is that the center column does not expand to fit the browsers width, which is what I'm trying to accomplish. I don't think faux columns technique allows for that, does it?

  4. #4
    Join Date
    Sep 2003
    Location
    Seattle
    Posts
    159
    The effect I'm going for can be seen here:

    http://www.themaninblue.com/

    Try resizing the browser and notice what happens to his content divs.

  5. #5
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    1,592
    All you have to do is specify the width of the columns in percentages.

    PS: THAT SITE IS FREAKIN' BEAUTIFUL (themaninblue.com)

    VALID XHTML ASWELL! HOLY ****!

  6. #6
    Join Date
    Jan 2004
    Location
    United Kingdom
    Posts
    610
    Mmm. I admire those design skills. Very beautiful. Nice coding as well. Im jealous!

  7. #7
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    A related problem is if I have very little content in the center column, I'll still get a vertical scroll bar
    That seems to be related to your .contentcontainer. Drop it to 80% to see what I mean.

  8. #8
    Join Date
    Aug 2003
    Posts
    1,576
    Here's my attempt at it. I did have to have two container divs to account for the stretchage
    Attached Files Attached Files

  9. #9
    Join Date
    Sep 2003
    Location
    Seattle
    Posts
    159
    Wow nice job Sam, thanks a lot!

  10. #10
    Join Date
    Aug 2003
    Posts
    1,576
    No problem, glad to help

  11. #11
    Join Date
    Sep 2003
    Location
    Seattle
    Posts
    159
    I've implemented your CSS into my own design. You can see the result in the link in my sig. The content now expands horizontally to fit the browser as I wanted, and I added a footer div. There's still some error checking I need to do.

    IE's lack of support for min-height makes it annoying on pages with very little content (the footer appears too high). I don't know how to fix that other than adding lots of <br /> tags which I don't want to do, or adding a big thick bottom padding on the content, which I also don't want to do. In Mozilla/Opera the min-height CSS works so it's no problem.

  12. #12
    Join Date
    May 2004
    Location
    The Big M
    Posts
    669
    the pic that extends along your text on the sides cuts off abruptly about a third of the way. in ie.

  13. #13
    Join Date
    Aug 2003
    Posts
    1,576
    perhaps you should explore footers?

  14. #14
    Join Date
    Sep 2003
    Location
    Seattle
    Posts
    159
    Originally posted by theuedimaster
    the pic that extends along your text on the sides cuts off abruptly about a third of the way. in ie.
    Which version of IE? I'm not seeing it that way in IE6.

  15. #15
    Join Date
    Sep 2003
    Location
    Seattle
    Posts
    159
    Thanks for that link Sam, I browse ALA a lot, but have never seen that one. I'm implementing it now and it's working great so far. I have not implemented the javascript part of it yet.

    theuedimaster, are you referring to one of the 2 files linked in my original post? I've not fixed those and will just delete them, as I've gone a different route from that idea. Do you see this IE problem on the page linked in my sig?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles