Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Layout Problem - Right Column

    I'm having a small problem getting the center content of my page to display correctly.

    www.graffetto.com

    I want to have the center column flush with the right column, but i can't get rid of the margin around the top and left. heres the css:

    Code:
    #rightcontent 
    {
    position: absolute;
    right:0px;
    top:0px;
    width:200px;
    border:1px solid #000000;
    }
    
    #centercontent 
    {
    margin-right: 200px;
    left: 0px;
    top: 0px;
    border:1px solid #c0c0c0;
    }

    this is the HTML:

    Code:
    <div id="centercontent">
    center content fdsuoaip fdsaui opfdsau oifdsau foidsau foidpsua foidsu aoifu dsaoifu dsoaiufdos fodsua oifusaiofudsoaiu dsoaufoids foid sfoidu saoifudsa fou dsofiu dsaof iudia fudsai fudsoa ufdsoa ufsdoi aufdosiuf dsoa fudsoa fudsoi fudsoi fudso iafudo iafudso fudsoi fudsoi fuso audoisuafsu aifda
    </div>
    
    <div id="rightcontent">
    Right content
    </div>

  • #2
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    Just play with the right margin. For example, changing it to 191px makes the borders touch.

    It has to do with the default padding on the body. You could set the body padding to zero and leave the right margin at 200px. Then, just adjust the padding of the #centercontent.

    Either way, it has the same effect.
    Pepe, the bull

  • #3
    New Coder
    Join Date
    Jun 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Pepe, the bull
    Just play with the right margin. For example, changing it to 191px makes the borders touch.

    It has to do with the default padding on the body. You could set the body padding to zero and leave the right margin at 200px. Then, just adjust the padding of the #centercontent.

    Either way, it has the same effect.
    SWEET! thanks man, I appreciate it.

  • #4
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I hope that site isn't just gonna be two images forever.

  • #5
    New Coder
    Join Date
    Jun 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Ranger56
    I hope that site isn't just gonna be two images forever.
    lol ?? i'm beginning the coding process now. I'm having trouble with that one pixel from the right, really annoying me. firefox renders correctly with 0px margin, not IE

  • #6
    New Coder
    Join Date
    Jun 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rollinlow54
    lol ?? i'm beginning the coding process now. I'm having trouble with that one pixel from the right, really annoying me. firefox renders correctly with 0px margin, not IE
    does anyone know why IE will not render this correctly? IE is putting an extra pixel inbetween the right edge of the page and the div. the only way i can alleviate that problem is by setting margin-right: -1px, but this causes firefox to throw the image one pixel off the edge of the page.

  • #7
    New Coder
    Join Date
    Jun 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    any takers?

  • #8
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try setting all the elements which have no margin to 'margin:0'. You have to remember also that IE treats borders and padding differently to FF.

  • #9
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Throw in the box model hack

    Or you could reset css standards browsers with the box-model property:

    * {
    box-sizing:border-box;
    -moz-box-sizing:border-box
    }

    Then opera and gecko browsers will render almost as IE.
    CATdude about IE6: "All your box-model are belong to us"


  •  

    Posting Permissions

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