SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What's wrong with my margins?

    My #centercontent div and my #rightcontent div insist on overlapping a little even though I have tried to tell them not to in my css. I was wondering if you guys could maybe help me figure out why. I temporarily set the borders on each so that you could see my problem. I just want there be a nice margin like you see between the #leftcontent and the #centercontent div.

    Also, my css validates, but if you have any suggestions as to more streamlined code, I'm all ears.

    Take a look at the mark-up here

    Take a look at the css here

    Thanks
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    #rightcontent has a width of 150px, plus 20px padding (10 left and 10 right), plus a 10px margin, plus 10px positioning from the right, plus a 1px border, which equals 191px. Your #centercontent only has 181px accounted for (170px margin on right + 1px border + 10px padding on the right). Try fudging those numbers a little more, i.e. set margin-right on #centercontent to a greater number than what you have now, it only needs maybe 5px.

    Also, your left margin on #rightcontent doesn't seem necessary, since it's absolutely positioned and is removed from normal document flow anyway.

  3. #3
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks vgarcia.

    This raises another question:
    When using the box model hack, do I need to include the margin widths in ie's width value, or just padding and borders? Is this my problem?
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  4. #4
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by garlinto
    Thanks vgarcia.

    This raises another question:
    When using the box model hack, do I need to include the margin widths in ie's width value, or just padding and borders? Is this my problem?
    Only padding and borders, just make sure to take both sides in to account.

    As a matter of fact, keeping this in mind, one can very often avoid having to use the box model hack by setting a margin on a child element instead of padding on its parent.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Zoef
    As a matter of fact, keeping this in mind, one can very often avoid having to use the box model hack by setting a margin on a child element instead of padding on its parent.

    Rik
    That's exactly what I do. I don't particularly like using the Box Model Hack, but since it works I dish it out. However, I hate the redundance inherent in the BMH.

  6. #6
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    That's exactly what I do. I don't particularly like using the Box Model Hack, but since it works I dish it out. However, I hate the redundance inherent in the BMH.
    Agreed, and an other disadvantage of designing with the box model hack is that borders, padding and width all have to be expressed in the same unit for it to work.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac


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
  •