수다닷컴

안녕하세요,
혼자서 맨땅에 헤딩해가며 코딩중인 1인입니다.

상단부터 차근차근 코딩을 해가고 있는데 아래 그림같은 문제가 생겼습니다.
(쉬운영역 파악을 위해 배경색을 깔고 작업합니다.)

관련상품의 하단에 상품들이 나열되어야 하고 이 상품은 5개 이상이 되면 하단으로 떨어집니다.
(첫 이미지에 first-child는 아직 적용하지 않은 상태예요.)
이때 이 밑부분에 코멘트를 다는 부분이 나오는데 그 부분도 함께 하단으로 이동되어야해요.
그래서 세로값을 지정해서 잡아줄수가 없습니다.

근데 참 신기한게 익스플로러에서 잡힌 영역과 크롬에서 잡힌 영역이 달라요.
제가 지금까지 작업했던건 하단으로 영역이 늘어나면 패딩이나 마진값이 같이 붙어서 늘어났었거든요?
그런데 이번엔 그게 안되네요 ㅠ
일단 브라우저별로 다른거라도 맞춰야 작업이 진행이 될텐데
어디 물어볼데도 없고 너무너무너무너무 답답합니다 ㅠ_ㅠ익스플로러 8버전

크롬 브라우저 버전
---- html소스는 아래와 같습니다.

div class=plus_prod
pimg src=images/board_plus.gif border=0 alt=관련상품 //p
ul
liimg src=images/142x142_03.jpg border=0 alt= //li
liimg src=images/142x142_03.jpg border=0 alt= //li
liimg src=images/142x142_03.jpg border=0 alt= //li
liimg src=images/142x142_03.jpg border=0 alt= //li
liimg src=images/142x142_03.jpg border=0 alt= //li
liimg src=images/142x142_03.jpg border=0 alt= //li
liimg src=images/142x142_03.jpg border=0 alt= //li
/ul
/div

---- html소스는 위와 같습니다.

------------ 관련 css 소스는 아래와 같습니다.

#content_notice .notice_new .plus_prod { width:727px; background-color:#bfe635;}
#content_notice .notice_new .plus_prod p { float: left; width: 727px; margin:15px 0 30px 8px; }
#content_notice .notice_new .plus_prod ul { width:727px; height:300px; background-color:#84d6e9; }
#content_notice .notice_new .plus_prod ul li { float: left; padding-left:4px; }

------------ 관련 css 소스는 위와 같습니다.
참고로 요런 모양이 나와야 합니다..

부디 제발 도움 좀 부탁 드릴게요 ㅠ_ㅠ
미리 감사합니다..

신청하기