...

View Full Version : CSS Layout Problem - Right Column



rollinlow54
07-17-2005, 07:32 PM
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
07-17-2005, 07:44 PM
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
07-17-2005, 08:05 PM
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
07-17-2005, 08:18 PM
I hope that site isn't just gonna be two images forever.

rollinlow54
07-17-2005, 08:21 PM
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
07-17-2005, 09:12 PM
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
07-18-2005, 01:56 AM
any takers?

mark87
07-18-2005, 02:06 AM
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
07-18-2005, 08:46 AM
Throw in the box model hack :D

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum