SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help! 3-column CSS layout - center column too wide when text is resized

    Nearly all of my site uses a 2-column CSS layout that works fine.

    I'm trying to get my home page to be a 3-column CSS layout, using absolute left and right columns, with a fluid center column, as described in HTML Utopia.

    My 3-column layout currently works in IE6, as long as the browser's Text Size is set to "medium" or "smaller" or "smallest".

    If I set the browser's text size to "larger" or "largest," the medium column expands and runs underneath the right column.

    I know that others must have run into this problem, but I can't find any other posts here about it, and I've tried to change several things in my CSS without any success.

    My 3-column page:
    http://www.computerbob.com/index2.php

    The CSS:
    http://www.computerbob.com/css/styles.css
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

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

    Have you fixed it as it looks ok in my IE6. I set the text to largest and nothing seems to overlap.

    Paul

  3. #3
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for looking, Paul. I've spent the entire day on this one problem, but the center column is still expanding about 30 pixels worth, underneath the right column for me if I set the IE6 font size setting to anything larger than "medium."
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  4. #4
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In my browser, it appears that the center column text itself is pretty much staying at the correct width, but I'm getting about 30 pixels of extra white padding to the right of that text, with the right border of the center column ending up about halfway across the right column, but underneath the right column.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

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

    Here's what I get on largest text size in IE6 (pc).

    http://www.pmob.co.uk/temp/images/combobimg.gif

    Paul

  6. #6
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I FINALLY FIXED IT!!!

    I could hardly believe that I had found out what was causing the problem, but as soon as I did, I knew that it was going to work!

    You know those translation links at the top of the center column? I finally realized that, in my IE6 browser, the text of those translation links was THE ONLY TEXT that was extending underneath the right column when I made the font larger. Because it was extending to the right, it was causing all the text below it (which stayed within its specified width) to have a lot more right padding.

    That was the clue that told me to look at the code for those translation links, and that's how I finally "broke the case."

    When, I replaced the non-breaking spaces between those translation links with regular spaces, the problem went away, and the page looked just like the screenshot that you did! Looking back at it, it shouldn't have taken me the whole day to figure that out.

    Thanks for your help, Paul! The screenshot that you made was very helpful!
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search


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
  •