Hey all,
I'm working on my website right now and am trying to fix my sidebar alignment. It looks fine in Firefox but doesn't align properly in Google Chrome nor IE. I think it might be because I am using position:relative though I'm unsure.

Below is my stylesheet; a live preview of my site can be viewed here. (http://ericaftw.com/cute)

Any feedback is appreciated.

body {
background-image: url('images/background.jpg');
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7.5pt;
}

a:link {
text-decoration: none;
color: #61989E;
}

a:hover {
text-decoration: none;
color: #324A4D;
}

a:visited {
text-decoration: none;
color: #999999;
}

a:active {
text-decoration: none;
color: #000000;
}

#container {
margin-left: auto;
margin-right: auto;
height: 100%;
}

#header {
height: 106px;
background-color: #ABE7EE;
border-bottom: solid #C2C2C2 10px;
}

#navUp {
height: 106px;
}

#navOver {
height: 106px;
visibility: hidden;
}

#content {
width:1024px;
background-image: url('images/content.gif');
height: 100%;
min-height: 655px;
overflow: auto;
}

#wrap {
background: transparent;
width: 812px;
height: 100%;
padding-top: 10px;
}

#main {
float: left;
width: 555px;
height: 100%;
text-align: center;
padding-left: 5px;
padding-right: 8px;
}

#right {
position: relative;
top: 0px;
margin-left: 580px;
width: 240px;
height: 100%;
text-align: center;
}

#welcome {
width: 538px;
border-top: 5px solid #696060;
background-color: #BDBEBE;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 5px;
}

#rollover {
position: absolute;
left: -300px;
width: 170px;
padding: 2px;
background-color: #000000;
visibility: hidden;
z-index: 100;
}

Note: the code for my sidebar is highlighted in red.

Hello EricaL,
I think your box model (http://www.w3.org/TR/CSS2/box.html)is a little off.

Your #content is 812px wide
#main is 555px plus 13px padding - 568px
#right is 240px wide but it's margin-left:580px;

So the 580px margin plus the 240px width, 820px, doesn't fit in your #main.

Hey Excavator,
Thanks for your response.

I decreased the width of my sidebar so that it was equal to 812px and was able to get it to align correctly in both Firefox and IE.

Thanks again :)