As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread:

CSS, Three columns, and browser compatibility

Track NineTrack Nine Registered User regular
edited June 2009 in Help / Advice Forum
Right, this may have a simple solution that I simply can't see, but I've been going round in circles for days now trying to get this working and I'm getting nowhere.

Basically, I'm trying to create a three column layout of the style:


The left and right columns would be of fixed size, with the center column filling out the space inbetween. Additionally, the center column should expand to fill the additional space should the left of right column not be present. That may sound silly, but it would serve a purpose and add a little flexibility.

So, I can get it to work in IE (testing with 6 and 7) and I can get it to work in Firefox.. but not both, because Microsoft have to be special and different interpretations of CSS standards are not fun. At all.

Anyone got any ideas how to pull this off?

Track Nine on


  • flatlinegraphicsflatlinegraphics Registered User regular
    edited June 2009
    without seeing your code, heres a solution:
    <!--[if IE 6]>
    <link href="ie6.css" rel="stylesheet" type="text/css" />

    otherwise, post samples/links.

    flatlinegraphics on
  • GanluanGanluan Registered User regular
    edited June 2009
    We've ended up doing the same thing, we actually have different versions of the CSS. Of course, those different versions contain only the classes that require changes for specific browsers, so the bulk is still maintained on one cross-browser CSS file.

    Ganluan on
  • Sharp101Sharp101 TorontoRegistered User regular
    edited June 2009
    Can you do something like this?

    <div id="right_col" style="float:right; width:200px;">Right Content</div>
    <div id="left_col" style="float:left; width:200px;">Left Content</div>
    <div id="middle_col">Main Content</div>

    Sharp101 on
  • Track NineTrack Nine Registered User regular
    edited June 2009
    Sorry about taking so long to reply. I got pulled away right after posting this thread and couldn't get back on to reply.

    Anyway, thanks for the suggestions - I had considered the use of separate, browser specific style sheets or hacks, but I've been trying to avoid it if possible.

    Sharp101's suggestion seems to have put me on the right track. I re-ordered the elements in the HTML and changed the float properties of the three column elements. I had been playing with setting the mid column to a float as well as the right and left columns, which had got the layout working in IE (mistake) but not in Firefox which was causing some of the confusion.

    Now it seems like I've got it working in both browsers without hacks. Basically, the layout of the elements in the HTML is now:


    The left and right columns are set to float left and right accordingly, but the real stumbling block seemed to be that I was setting a top and left positioning value for each column. Try not to laugh at my stupidity, but by default I'd just been adding the two values (each set to 0) for each element. Once I removed the values, then with the code order change things have actually managed to click and seem to be working as I'd wanted them to.

    Track Nine on
  • Sharp101Sharp101 TorontoRegistered User regular
    edited June 2009
    So you got it working now? Good!

    Floats can be tricky. If you want to put anything beneath these 3 columns now, make sure to use <div clear="all"> or <br clear="all"> to make sure it clears those floats out of the way. (issues could arise if the floating elements become taller than the middle content, and you have more content underneath)

    You also probably could have gotten it to work with absolute positioning and sized, but that is way to much a a finicky bitch to get working cross browser and it just isn't good practice anymore.

    Sharp101 on
  • DelzhandDelzhand Hard to miss. Registered User regular
    edited June 2009
    If you're still having problems, google "holy grail layout."

    Actually, I'll save you the trouble:

    Delzhand on
  • Sharp101Sharp101 TorontoRegistered User regular
    edited June 2009
    Oooh, Bookmarked that.

    Sharp101 on
Sign In or Register to comment.