How do I fix these margins? Only working ok in Firefox

I'm having issues with the margins in browsers (other than Firefox) on开发者_运维百科 this page:

http://jumpthru.net/newsite/commentary/

Here is the CSS:

#container3 {
    float: right;
    margin: 0 -240px;
    width: 100%;
}

#content3 {
    margin: 0 210px 0 -45px;
    width:500px;
}

#primary, #secondary {
    left:920px;
    overflow: hidden;
    padding-top: 40px;
    position:absolute;
    width: 220px;

}

---

Kind of a strange way to build up the page.. I recommend you to create a 2 column layout in main2.. Left for menu and right for the comments header, with beneath that the content and the recent comments div..

And, start using clearfix: http://www.positioniseverything.net/easyclearing.html

---

I fixed the issue in Chrome by changing this CSS:

#primary, #secondary {
left: 980px; /*was 920px*/
overflow: hidden;
padding-top: 40px;
position: absolute;
width: 220px;
}

---

I see you're using absolute position on #primary, this is based on the window so when i resize the window the "Recent Comments" section moves. So depending on the resolution of the users screen and the size of their browser this will move.

add position relative to the main2 div. Then change the left value on the #primary to right with a value of 0. this will keep it on the right side and always in the same place.

#main2 {
  position: relative;
  ...
}

#primary, #secondary {
    right: 0;
    ...
}

EDIT: The reason this works is when you use position: absolute the value is absolute the nearest relative parent element. if the element as no parent elements with position: relative it will be absolute to the browser window. Hope that makes sense.