CSS Layout Problem - Right Column

[rollinlow54]

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:

#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:

<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>

[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.

[rollinlow54]

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.

[Ranger56]

I hope that site isn't just gonna be two images forever.

[rollinlow54]

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

[rollinlow54]

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.

[rollinlow54]

any takers?

[mark87]

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.

[mrruben5]

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.