수다닷컴

http://billionsrule.woobi.co.kr/test/protoIndex.html

위의 페이지인데요.. IE9버전을 깔아 실행하고 있습니다. 근데 아무리 이것저것 다 건드려봐도 제 머리로는 도저히 해결이 안되네요... float:left 와 관련해서 무슨 문제가 있는 듯 한데... 간단하게 설명하자면...(크롬으로 볼때)

이게 제가 원하는 구성으로 실제 코드도 이런 식으로짠건데...;; 우측메뉴와 메인페이지는div태그로 float:left를 주어서 분할되 보이게 하였습니다. 근데 크롬에서는 제가 원하던 방식으로 제대로 보이는데 익스플로러에서만 위아래로 갈려서 보이네요. 왜그런가 봤더니..

우측메뉴와 메인페이지를 wrapping하고 있는 DIV가margin-left:auto margin-right:auto width:980px속성을 먹고 있는데요... 익스플로러에서는 희안하게우측메뉴 div를 가운데 정렬 시키고 메인페이지 div를 읽는 모양인지....우측메뉴가 가운데 정렬을 하고 남은 부분만 메인페이지가 사용할 수 있게 되버렸네요...;;

(IE9로 볼때)

결과적으로 익스플로러에서는최대 사이즈 980인데 우측메뉴가 가운데 정렬되고 우측에 남은 부분만 써먹게 되버렸으니... 전체적으로 사이즈가오바된거나 마찬가지라.. 메인페이지가 위에처럼 밑으로 가라앉습니다;;; 이걸 어찌 해결해야 할지 모르겠네요...;; 혹시 아시는 분 계시나요?

제가 설명을 너무 이상하게 한건지는 모르겠지만 제가 알아본 바로는 이렇네요...;; 혹시 몰라 관련 소스도 올려드립니다. 960gs에서 쓰는 css파일을 쓰는데 이런 문제가 발생할 줄은 ㅜㅜ 위에 상단메뉴는 아무이상없는데 메인페이지만 저러니 속상하네요;;

div id=content
div class=container_12(content를wrapping하고 있는 class입니다)
div class=page_nav (우측메뉴입니다. 여기에는 float:left와 width: 180px;속성이 담겨있습니다.)
ul
liimg src=images/profile_01.png //li
li첫걸음걷기/li
li최신소식/li
li스토리소개/li
li인기스토리/li
/ul
/div
div class=page_main(메인페이지입니다. 별건 없고 float:left만 담겨있습니다.)
div
ul id=top_lastest class=skin_black(jquery로 만든스크롤이미지입니다.)
liimg src=images/file_ex_01.png //li
liimg src=images/file_ex_02.png //li
liimg src=images/file_ex_03.png //li
/ul
/div
divabcabacasvasdfasdfsd/div
/div
/div
/div

...............................................................CSS....................................

.container_16 {
margin-left: auto;
margin-right: auto;
width: 980px;
}

#content {
position: relative;
}
.page_nav {
width: 179px;
float: left;
border-right: 1px solid #b3b3b3;
color: #333;
font-family: dotum;
font-size: 0.7em;
letter-spacing: -0.1em;
}
.page_nav ul li {
padding: 5px 0 5px 0;
}
.page_nav ul li:first-child {
padding: 20px 0 10px 0;
}
.page_main {
width: 769px;
float: left;
border-right: 1px solid #b3b3b3;
padding: 20px 15px;
}
.most_lastest {
float:left;
}

신청하기