SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3-col layout... things not adding-up - dropping content div - clearing sidebar conten

    Hey all...

    Not just here to say howdy, I need some help.

    So, this may be obvious to a lot of you folks, but I am having a heck of a time trying to figure-out why my content div drops in IE6 (only checked that version so far), and why adding few more pixels to the main container div seems to fix the problem.

    URL with example page:

    http://www.ambiguism.com/test/

    Currently, in IE6, the center content div (#mainContainer) drops below the content in the right-column div (in my example, that is the mock definition-list menu).


    The problem gets fixed if I add a few more pixels to the center content div:

    #mainContainer {
    background-color: transparent;
    /*width: 1050px;*/ /* Original value - causes drop. */
    width: 1055px; /* +5px fixes problem */

    }

    I thought I have done well at accounting for IE 3px jog... I am not using any padding or borders that would get in the way of the box model...

    Any help would be great. Also, suggestions to make this layout better would be great.

    I am kinda concerned about IE 5.2/Mac... I have found this style of layout works in that browser - well, once I get all the bugs worked out that is. Hehe.

    Many TIA's!!!

    Cheers,
    Micky

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

    You haven't addressed the 3px jog correctly (read the faq on floats for a long explanation ).

    Code:
     /* Fix 3px jog & hide from IE5-mac: \*/
     * html #colPrimary {
      margin: 0 217px 0 47px;
      height:1%;
     }
     * html #colSecondary { margin-left:-3px }
     * html #colTertiary { margin-right:-3px; }
     /* End IE5/mac hide */

    The height:1% fixes the jog but does nothing to account for the extra 3 pixels added on. You need to remove 3pixels from the side of the floats with a negative margin as shown and also reset the margins on the center column.

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    780 + 220 + 50 - 1050 + 17 + 3 =1070 =a drop

    * html #colSecondary { margin: 0 0 0 17px; }
    * html #colTertiary { margin: 0 3px 0 0; }

  4. #4
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys!

    Ack! I can't believe I got that wrong... I mean, I can believe it, but I feel purty stupid for not understanding the basic concept... re-reading the FAQ now.

    Thanks guys, I am sure I will be back with a few q's in a min or two.

    I owe both of you big-time! Hopefully I can help answer some of your questions at some point...

    Billion Thanks!
    Cheers,
    Micky

  5. #5
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WOW! Fixed! Thanks to both of you.

    I am blown-away... I have been getting this type of layout wrong for at least a year now... Lol, it explains a lot of headaches I have had in the past.

    Well, I previously posted a question about a 4 or 5 col layout..

    http://www.sitepoint.com/forums/showthread.php?t=394339

    As you can see, I got a few great responses (all4nerds being one)... Long story short, below link is my take on a 5-col layout (just added 3 more cols to the center-content of the same layout from my first post in this thread):

    http://www.ambiguism.com/test/index-fix.html

    IE-6/Firefox 1.5 seem to be cool with the above setup... anyone see any potential probs or pitfalls? I am just trying to keep it simple, and hopefully still support IE 5.2/mac...

    Many thanks Paul and All4Nerds! You guys really are top-notch! I hope whatever jobs you guys have are paying you top-dollar.

    Cheers,
    Micky

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

    If all your columns are a fixed width then you could simply float all columns and not worry about the 3 pixel jog or any hacks (apart from the double margin bug on floats of course). The 3 pixel jog only applies between static content and the adjacent floats and not between floats themselves.

    Usually the margin: 0 xxpx approach for a container is used when the container is a fluid width and so you just set the size with margins. If you have a known fized width then just float each column with the correct width and keep things simple

  7. #7
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    If all your columns are a fixed width then you could simply float all columns and not worry about the 3 pixel jog or any hacks (apart from the double margin bug on floats of course). The 3 pixel jog only applies between static content and the adjacent floats and not between floats themselves.
    Ah... so you would suggest floating all columns left (outer and inner), give them a width and the proper margin-left for layout/positioning?

    Quote Originally Posted by Paul O'B
    Usually the margin: 0 xxpx approach for a container is used when the container is a fluid width and so you just set the size with margins. If you have a known fized width then just float each column with the correct width and keep things simple
    I like simple! Exactly what I strive for, but (as you can tell) have problems achieving!

    Now that you mention it, I actually based this current layout off of a fluid-width layout I did a while back... now I can see where I went wrong.

    I am still in the process of re-re-reading the FAQ (thanks for posting all this great info btw)...

    Do you have any examples of such a layout on your website (all floats)?

    * Edit: Ah, found this, seems like a good place to start:

    http://www.pmob.co.uk/temp/3col-centred-template.htm

    Thanks for the tips!
    Cheers,
    Micky

  8. #8
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoa!! This is so much better (although, only tested IE6, and Firefox 1.5/PC)...

    http://www.ambiguism.com/test/index-fix2.html

    Now, the question is, how does this do in IE 5.5, 5, and 5.2/Mac (I care less about that browser, but would be nice).

    Any thoughts on the above layout? I am heading-over to browsercam.com now.

    TIA!
    Cheers,
    Micky

  9. #9
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    OH-MAH-GOD! I am getting consistent browsercam.com results!

    http://www.browsercam.com/public.aspx?proj_id=262544

    I am pretty f*@%$#n elated at the moment...

    It ended-up being so simple... I mean, I know it gets more complicated when one starts adding padding/borders, but wow, this rocks.

    I am sure it is not a bug-free layout, and one could argue that fixed-width layouts have problems (vs. fluid/elastic), but I am happy.

    Thanks to the both you guys!

    Cheers,
    Micky

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    One of the problems (and benefits) of css is that sometimes there are many ways of doing the same thing. Some are simple and some are more complicated and it usually takes a bit of practice and experience to realise which is the right way to go.

    The more you do, the easier it gets and eventually you get used to all the bugs and use techniques that avoid them where possible.


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
  •