div로 레이아웃 잡고 잇는데 margin 속성이 좀 이상합니다;;

우선 스타일 부분이구요..

/* 컨텐츠 전체 감싸는 부분 */
#contentWrap {
 background:#F5F5F5;
 width:979px;
 height:auto;
 border:solid #333;
 border-width:0 1px 1px 1px; /* 상,우,하,좌*/
 padding:0 0 10px; /* 상, 좌우, 하 */
 float:left;
}

/* 왼쪽 메뉴부분 */
#leftContents {
 margin:0 auto 0 7px;
 width:170px;
 height:50px;
 background:black;
 float:left;
 position:relative;
}

/* 중앙 컨텐츠부분 */
#centerContents {
 margin:0 auto;
 width:100px;
 background:black;
 height:50px;
}

/* 오른쪽 컨텐츠부분 */
#rightContents {
 margin:0 7px 0 auto;
 width:170px;
 height:50px;
 background:black;
 position: relative;
 float:right;
}

아래는 div 소스입니다.

 <!-- 컨텐츠 & 메뉴 -->
 <div id="contentWrap">
  <div id="leftContents">
  </div>
  <div id="rightContents">
  </div>
  <div id="centerContents">
  </div>
 </div>
 <!-- 컨텐츠 & 메뉴 끝 -->

여기서 문제는 leftContents 에서 margin 속성에 좌측 여백을 7px,  rightContents 의 margin 속성에 우측 여백 7px 이렇게 줬는데
두배가 되어버립니다. 익스플로러에선 14px로 처리를 해버리네요.
파이어폭스로 볼때는 7px로 정상적으로 나오던데 익스에서는 여백이 14px이 되어버리네요..

아래 그림이 파이어폭스로 봤을때의 화면이구요.. 제가 원하는 결과가 이거구요..


아래는 익스플로러에서 봣을 경우입니다.

좌우가 확실히 넓죠;; 왜이런거죠? 해결법좀 알려주세요 ㅠㅠ 진도가 안나가서 죽겠습니다 ㅠㅠㅠㅠ