수다닷컴

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml lang=ko xml:lang=ko
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
title반응형일까 CSS/title

style type=text/css
/* reset */
*{margin:0;padding:0;}
html,body{width:100%;height:100%;}
ol,ul,li{list-style:none;}
/* header */
#header { position:absolute; left:0; top:0%; width:100%; min-width:678px; height:58px; min-height:58px; background-color:#ccffff; overflow:hidden; }
#header h1 { position:absolute; right:0; top:0; width:288px; height:58px; background:#66cc66; font-size:30px; font-weight:800; text-align:center;}
/* leftNavigation */
#leftNavigation { position:absolute; left:0; top:58px; height:94.63%; width:5.73%; min-width:110px; max-width:110px; min-height:650px; background:#d1d1d1; overflow:auto;}
#leftNavigation ul li { width:110px; height:80px; border-bottom:1px solid #e4e3e4; }
#leftNavigation ul li a { display:block; height:80px; padding-left:20px; line-height:80px; }
#leftNavigation p.image_Box{ position:absolute; left:29px; bottom:20px; width:53px; height:35px; background:#3e3e3e; color:#fff; }
/* leftList */
#leftList { position:absolute; left:110px; top:58px; width:14.58%; min-width:280px; max-width:280px; height:94.63%; min-height:650px; background:#918e8f; color:#fff; overflow:auto;}
#leftList .l_Title { width:240px; position:absolute; left:20px; top:45px; padding-bottom:15px; border-bottom:1px solid #90bce6; font-size:17px; font-weight:400; }
#leftList .list { position:absolute; left:0; top:80px; }
#leftList .list li { margin-left:20px; width:240px; height:30px; border-bottom:1px solid #90bce6; }
#leftList .list li a { display:block; margin-left:-20px; padding-left:20px; width:260px; line-height:30px; }
#leftList .list li a span.num { margin-right:13px; }
#leftList .paging {position:absolute; right:19px; top:13px; }
#leftList .paging li { float:left; }
#leftList .paging li a { padding:3px 6px; }
#leftList p.cr { position:absolute; left:20px; bottom:20px; font-size:11px; font-weight:400; }
/* content */
#content { position:absolute; left:390px; top:58px; width:79.69%; min-width:400px; height:94.63%; overflow:auto; background:#000000; }
#content div { float:left; width:200px; height:197px; background:#cc9966; }
#content .w_Bg { background:#ff6666; }
/style
/head
body
div id=header
h1a href=#logo/a/h1
/div!-- header --
div id=wrap
div id=leftNavigation
ul
li id=menu1a href=/menu_01/a/li
li id=menu2a href=/menu_02/a/li
li id=menu3a href=/menu_03/a/li
li id=menu4a href=/menu_04/a/li
li id=menu5a href=/menu_05/a/li
li id=menu6a href=/menu_06/a/li
li id=menu7a href=/menu_07/a/li
/ul
p class=image_Box이미지/p
/div!-- leftNavigation --
div id=leftList
p class=l_Titlesubmenu/p
ul class=list
lia href=/span class=num03/spanlist_01/a/li
lia href=/span class=num02/spanlist_02/a/li
lia href=/span class=num01/spanlist_03/a/li
/ul!-- list --
ul class=paging
lia href=//a/li
lia href=/1/a/li
lia href=/2/a/li
lia href=/3/a/li
lia href=//a/li
/ul!-- paging --
p class=crCopyright © 2013 All Right Reserved./p
/div!-- leftList --
div id=content
div
p이미지/p
/div
div class=w_Bg
p이미지/p
/div
div
p이미지/p
/div
div class=w_Bg
p이미지/p
/div
div
p이미지/p
/div
div class=w_Bg
p이미지/p
/div
div
p이미지/p
/div
div class=w_Bg
p이미지/p
/div
div
p이미지/p
/div
div class=w_Bg
p이미지/p
/div
div
p이미지/p
/div
div class=w_Bg
p이미지/p
/div
div
p이미지/p
/div
div class=w_Bg
p이미지/p
/div
div
p이미지/p
/div
div class=w_Bg
p이미지/p
/div
/div!-- content --
/div!-- wrap --
/body
/htmlbml위 내용대로 실행하시면 반응형 인척 하는 CSS를 구성해 봤습니다.

문제점이 발생하였으나 혼자서 헤딩하다 도저히 안되서 질문드려요.

1. 상하 좌우 스크롤이 발생되어 좌우 스크롤시 우측 보기흉한 부분이 보입니다.
(body에 overflow:hidden도 해봤지만 역시나 상하 좌우로 이동시 동일증상 발생합니다.)
또한 상하 스크롤시 좌측하단 이미지박스가 스크롤 없는 화면 맨 하단에서 20px 위로 올라와
위치해야 하는데.... 스크롤로 내려야만 그렇게 보입니다.

2. 좌측 컨텐츠 부분 이미지 박스들이 화면을 줄이면 한열씩 떨어지는 방식이나
최소 가로2개 남으면 더이상 줄지 않도록 하려고 합니다.
방법이 있을까요??
단순 CSS로만 동작하는게 한계가 있는걸까요??

여러 고수님들의 조언부탁드립니다.

신청하기