모든 화면 해상도에서 웹 사이트가 올바르게 맞지 않습니다.

Question

내 사이트 - 내 화면 크기가 매우 작아 완벽하게 적합합니다.

내 사이트가 완전히 보이지 않는 경우가 있으며 어떤 경우에는 탐색하기가 어렵다는 전자 메일이 전송되었습니다.

www.rawpaste.com

이 이미지에서 볼 수 있듯이 : http://i.imgur.com/pQuqb6I.png

어떻게 사이트가 모든 화면 크기에 맞게해야합니까? http://rawpaste.com/themes/default/style/root.css

/* ================= Body Styles ================= */ 
body{ 
    background:#F4F4F4; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    color:#737F89;} 

a{color:#367DB3;} 
a:hover{ color:#333;} 


/* ================= General ================= */ 
.wrapper{ 
    width:980px; 
    margin:0px auto; 
    padding:50px 0px;} 

#main{ 
    padding-bottom:20px; 
    background:#fff url(../img/main-bg.png) repeat-y; 
    border-bottom:1px solid #D6D8D8; 
    border-bottom-right-radius: 4px; 
    border-bottom-left-radius: 4px; 
    box-shadow:0px 1px 0px #DFDFDF;} 

#sidebar{ 
    width:188px; 
    float:left; 
    padding-left:1px; 
    padding-right:1px;} 

#page{ 
    width:789px; 
    float:right; 
    padding-right:1px; 
    position:relative;} 

.center980{ 
    margin:0px auto; 
    width:980px;} 

.content{padding:20px 24px; line-height:17px; } 


/* ================= Header ================= */ 
#header{ 
    height:73px; 
    background:url(../img/header-bg.png) no-repeat;} 

#header .logo{ 
    width:190px; 
    float:left; 
    text-align:center; 
    padding:20px 0 0 0;} 
#header .logo img:hover{ opacity:0.9;} 

#notifications{ 
    width:430px; 
    float:left; 
    padding-left:16px; 
    padding-top:18px;} 
#quickmenu{ 
    width:150px; 
    float:left; 
    padding-top:18px;} 

.qbutton-left{ 
    display:block; 
    width:42px; 
    height:25px; 
    float:left; 
    background:url(../img/qbutton.png) no-repeat 0px 0px; 
    text-align:center; 
    position:relative; 
    padding-top:11px;} 
.qbutton-left:hover{background:url(../img/qbutton.png) no-repeat 0px -36px;} 

.qbutton-normal{ 
    display:block; 
    width:42px; 
    height:25px; 
    float:left; 
    background:url(../img/qbutton.png) no-repeat -42px 0px; 
    text-align:center; 
    position:relative; 
    padding-top:11px;} 
.qbutton-normal:hover{background:url(../img/qbutton.png) no-repeat -42px -36px;} 

.qbutton-right{ 
    display:block; 
    width:43px; 
    height:25px; 
    float:left; 
    background:url(../img/qbutton.png) no-repeat -84px 0px; 
    text-align:center; 
    position:relative; 
    padding-top:11px;} 
.qbutton-right:hover{background:url(../img/qbutton.png) no-repeat -84px -36px;} 

.qballon{ 
    background:url(../img/qballon.png) no-repeat; 
    width:19px; 
    height:21px; 
    display:block; 
    text-align:center; 
    color:#FDEDEC; 
    font-size:10px; 
    position:absolute; 
    top:-12px; 
    padding-top:4px; 
    right:2px;} 

/* ================= Profilebox ================= */ 
#profilebox{ 
    width:146px; 
    height:46px; 
    background:url(../img/profileboxbg.png) no-repeat; 
    float:right; 
    margin:14px 14px 0 0; 
    position:relative;} 
#profilebox .display{ 
    display:block; 
    padding:5px 6px; 
    font-size:11px; 
    color:#A5C6EC; 
    line-height:15px;} 
#profilebox .display:hover{ 
    text-decoration:none;} 
#profilebox .display img{ 
    border:0px solid #1D4E76; 
    float:left; 
    margin-right:7px;} 
#profilebox .display b{ 
    display:block; 
    color:#fff;} 
#profilebox .display span{ 
    background:url(../img/arrow-down.png) no-repeat right; 
    padding-right:11px;} 

#profilebox .display:hover, #profilebox:hover{ 
    background:url(../img/profileboxbg-hover.png) no-repeat;} 

#profilebox:hover .profilemenu, .profilemenu:hover{ display:block;} 
.profilemenu{ 
    display:none; 
    background:#3C81B5; 
    border:1px solid #1C4D78; 
    border-top:none; 
    padding-top:3px; 
    margin-top:-3px; 
    position:relative; 
    z-index:1000; 
    border-bottom-right-radius: 4px; 
    border-bottom-left-radius: 4px;} 
.profilemenu a{ 
    display:block; 
    font-size:11px; 
    color:#A5C6EC; 
    padding:10px 7px;} 
.profilemenu a:hover{ 
    text-decoration:none; 
    color:#fff; 
    background:#306997;} 

/* ================= Searchbox ================= */ 
#searchbox{ 
    display:block; 
    background:url(../img/searchbox-bg.png) repeat-x bottom; 
    height:65px;} 
#searchbox .in{ 
    padding:15px 0 0 9px;} 
#searchbox .input{ 
    background:url(../img/searchbox.png) no-repeat; 
    width:131px; 
    border:none; 
    font:13px Arial, Helvetica, sans-serif; 
    color:#999; 
    padding:11px; 
    padding-left:30px;} 
#searchbox .input-hover{ 
    background:url(../img/searchbox-hover.png) no-repeat; 
    width:131px; 
    border:none; 
    font:13px Arial, Helvetica, sans-serif; 
    color:#666; 
    padding:11px; 
    padding-left:30px;} 
/* ================= Sidemenu ================= */ 
#sidemenu{ padding:10px 0px;} 
#sidemenu ul{ 
    font-size:12px; 
    line-height:20px;} 
#sidemenu li{ 
    position:relative;} 
#sidemenu a{ 
    display:block; 
    color:#596677; 
    padding:9px 26px 9px 15px; 
    border-top:1px solid #F6F7F9; 
    border-bottom:1px solid #F6F7F9;} 
#sidemenu a img{ 
    margin-bottom:-4px; 
    margin-right:9px;} 
#sidemenu a:hover{ 
    text-decoration:none; 
    background:#EDF1F5; 
    color:#3F4C59; 
    border-top:1px solid #DCE7F0; 
    border-bottom:1px solid #DCE7F0;} 
#sidemenu .ballon{ 
    background:#94B5CF; 
    margin-left:6px; 
    border-radius:19px; 
    font-size:10px; 
    font-weight:bold; 
    line-height:normal; 
    color:#fff; 
    position:absolute; 
    border:1px solid #739BBF; 
    box-shadow:0px 1px 0px #fff; 
    right:9px; 
    top:11px; 
    padding:1px 5px;} 
#sidemenu li a:hover .ballon{ 
    background:#799FC1; 
    color:#fff; 
    border:1px solid #5384B0;} 
#sidemenu .active a{ 
    background:#fff; 
    border-top:1px solid #DFDFDF; 
    margin-right:-1px; 
    position:relative; 
    border-bottom:1px solid #DFDFDF; 
    color:#2C71A5;} 
#sidemenu .active a .ballon{ 
    top:10px; 
    right:10px;} 

/* Submenu */ 
.submenu{ 
    padding:0px; 
    border-bottom:1px solid #D6D6D6; 
    padding-bottom:6px; 
    display:none;} 
#sidemenu .submenu a{ 
    padding:5px 12px 5px 40px; 
    font-size:11px;} 
#sidemenu .submenu img{ 
    margin-right:8px;} 
#sidemenu .submenu .ballon{ 
    top:7px;} 
.submenu .action{ 
    position:relative;} 
.subtitle .action .arrow{ 
    position:absolute; 
    right:10px; 
    top:18px;} 



/* ================= Stats ================= */ 
#stats{ 
    display:none; 
    height:65px; 
    padding-left:20px; 
    background:#FFFADF url(../img/stats-bg.png) repeat-x bottom;} 
#stats .column{ 
    width:150px; 
    text-align:center; 
    float:left; 
    color:#9B936A; 
    font-size:11px; 
    margin-top:9px; 
    padding:2px 0px; 
    border-right:1px solid #F0E5BC;} 
#stats .column b{ 
    font-size:22px; 
    display:block; 
    color:#474643; 
    letter-spacing:-0.1px; 
    padding-bottom:5px;} 
#stats .last{ 
    border-right:none;} 
#stats .column .up{ color:#488D46;} 
#stats .column .down{ color:#D73535;} 
#stats .close{ 
    background:url(../img/icons/mini/close-stats.png) no-repeat center; 
    width:35px; 
    height:35px; 
    display:block; 
    text-indent:-9999px; 
    position:absolute; 
    right:0px; 
    top:0px;} 
#stats .close:hover{ 
    background:url(../img/icons/mini/close-stats-hover.png) no-repeat center;} 
#stats .arrow{ 
    position:absolute; 
    right:186px; 
    top:-9px;} 


/* ================= Page Title ================= */ 
.page-title{ 
    background:url(../img/page-title-minidot.png) repeat-x bottom; 
    border-bottom:1px solid #D1D3D3; 
    height:63px;} 
.page-title .in{ 
    padding:0px 24px;} 
.page-title .titlebar{ 
    color:#83929F; 
    font-size:11px; 
    width:480px; 
    float:left; 
    padding-top:14px;} 
.page-title .titlebar h2{ 
    color:#364656; 
    font-size:16px; 
    height:24px;} 
.page-title .shortcuts-icons{ 
    width:250px; 
    float:right; 
    padding-top:19px;} 

/* ================= Shortcut ================= */ 
.shortcut{ 
    background:url(../img/shortcut-normal.png) no-repeat top left; 
    width:25px; 
    display:block; 
    height:26px; 
    float:left; 
    margin-left:5px;} 
.shortcut:hover{ 
    background:url(../img/shortcut-hover.png) no-repeat top left;} 
.shortcuts-icons a{ 
    float:right;} 


/* ================= Simple Tip ================= */ 
.simple-tips{ 
    background:#FFFFCA url(../img/simple-tips-bg.png) repeat-x top; 
    border:1px solid #E0DBC2; 
    border-radius:3px; 
    padding:12px 17px; 
    color:#A79955; 
    font-size:11px; 
    line-height:20px; 
    margin:0 0 20px 0; 
    position:relative; 
    box-shadow:0px 1px 1px #F0F0F0;} 
.simple-tips h2{ 
    display:block; 
    color:#6D612E; 
    font-size:12px;} 
.simple-tips .close{ 
    background:url(../img/icons/mini/close-stats.png) no-repeat center; 
    width:35px; 
    height:35px; 
    display:block; 
    text-indent:-9999px; 
    position:absolute; 
    right:0px; 
    top:0px;} 

/* ================= Dashbutton ================= */ 
.dashbutton-div{ 
    padding:12px 0px;} 
.dashbutton{ 
    display:block; 
    text-align:center; 
    width:147px; 
    float:left; 
    margin-left:-1px; 
    margin-bottom:-1px; 
    border-radius:1px; 
    height:99px; 
    font-size:11px; 
    color:#7BA5C5; 
    padding-top:26px; 
    border:1px solid #DCE7F0; 
    overflow:hidden; 
    background:url(../img/dashbutton-normal.png) repeat-x bottom;} 
.dashbutton img{ 
    margin-bottom:19px;} 
.dashbutton b{ 
    color:#698296; 
    display:block; 
    font-size:12px;} 
.dashbutton:hover{ 
    background:url(../img/dashbutton-hover.png) repeat-x bottom; 
    color:#6798BC; 
    border:1px solid #CCDCEA; 
    position:relative;} 
.dashbutton:hover b{ 
    color:#4B5F6D;} 
.dashbutton:active{ 
    background:url(../img/dashbutton-active.png) repeat-x top;} 


/* ================= Simple Box ================= */ 
.simplebox{} 
.simplebox .titleh{ 
    border:1px solid #CBDAE8; 
    background:url(../img/simplebox-title-bg.png) repeat-x bottom; 
    height:40px; 
    border-top-right-radius: 3px; 
    border-top-left-radius: 3px; 
    position:relative;} 
.simplebox .padding-in{ 
    padding:10px; 
    line-height:18px;} 
.simplebox .titleh h3{ 
    font-size:12px; 
    color:#225983; 
    padding:13px 0 0 15px;} 
.simplebox .shortcuts-icons{ 
    position:absolute; 
    display:block; 
    text-align:right; 
    right:10px; 
    top:8px;} 
.simplebox .shortcuts-icons a{ 
    opacity:0.8;} 
.simplebox .body{ 
    border:1px solid #CBDAE8; 
    border-top:none; 
    color:#748897; 
    box-shadow:0px 1px 0px #eee; 
    background:#fff url(../img/simplebox-dot.png) repeat-x top;} 
.simplebox .button-box{ 
    border-top:1px solid #E6EDF4; 
    background:#FDFDFD url(../img/simplebox-dot.png) repeat-x top; 
    padding:15px 180px;} 

/* ================= Simple Title ================= */ 
.simpletitle{ 
    font-size:14px; 
    color:#215983; 
    padding:15px 0px; 
    border-bottom:1px solid #CBDAE8; 
    position:relative;} 
.simpletitle .shortcuts-icons{ 
    position:absolute; 
    display:block; 
    text-align:right; 
    right:10px; 
    top:10px;} 

/* ================= Gallery ================= */ 
.get-photo{ 
    margin:16px 10px 0 0; 
    float:left; 
    width:175px; 
    font-size:11px; 
    font-weight:bold; 
    color:#7A899C; 
    position:relative; 
    height:140px;} 
.get-photo img{ 
    border-radius:1px;} 
.get-photo:hover .buttons{ 
    display:block;} 
.get-photo:hover p{color:#53606F;} 
.get-photo p{ 
    padding-top:10px;} 
.get-photo .buttons{ 
    display:none; 
    position:absolute; 
    top:0; 
    right:0; 
    padding:5px 4px;} 
.mini-delete{ 
    display:block; 
    width:19px; 
    height:19px; 
    text-indent:-9999px; 
    float:right; 
    margin-left:3px; 
    background:url(../img/icons/mini/gallery-icon.png) no-repeat 0px 0px;} 
.mini-delete:hover{ 
    background:url(../img/icons/mini/gallery-icon.png) no-repeat 0px -40px;} 
.mini-edit{ 
    display:block; 
    width:19px; 
    height:19px; 
    text-indent:-9999px; 
    float:right; 
    margin-left:3px; 
    background:url(../img/icons/mini/gallery-icon.png) no-repeat 0px -20px;} 
.mini-edit:hover{ 
    background:url(../img/icons/mini/gallery-icon.png) no-repeat 0px -60px;} 


/* ================= Error Pages ================= */ 
.error-page{text-align:center;margin:10px 0;} 
.error-page h2{ 
    font-size:21px; 
    line-height:28px; 
    padding:14px 0px;} 
.error-page .red{ color:#E76463;} 
.error-page .blue{ color:#76A6D3;} 
.error-page .green{ color:#99C584;} 
.error-page p{ 
    font-size:12px; 
    color:#858585; 
    line-height:22px; 
    padding:24px 0px; 
    border-top:1px solid #EDEDED; 
    border-bottom:1px solid #EDEDED;} 
.error-page .button{ 
    font-size:14px; 
    color:#808080; 
    font-weight:bold; 
    padding:8px 14px; 
    border-radius:3px; 
    border:1px solid #C5C5C5; 
    border-bottom:1px solid #9D9D9D; 
    background:#fff url(../img/error-page-buttonbg.png) repeat-x bottom;} 
.error-page .button:hover{ 
    color:#333; 
    box-shadow: 0px 0px 1px #c6c6c6; 
    border:1px solid #BCBCBC; 
    border-bottom:1px solid #999;} 


/* ================= Form Elements ================= */ 
input, select, textarea{ 
    background:#fff; 
    border:1px solid #D2D4D4; 
    border-top:1px solid #A5A6A6; 
    border-radius:2px; 
    color:#333; 
    font:12px Arial, Helvetica, sans-serif; 
    padding:7px 6px;} 

.st-form-line{ 
    display:block; 
    border-bottom:1px solid #E5E5E5; 
    padding:16px 20px;} 
.st-labeltext{ 
    display:block; 
    color:#3C5868; 
    float:left; 
    width:150px; 
    line-height:20px; 
    font-size:12px; 
    padding-top:3px; 
    padding-right:10px;} 
.st-forminput{ 
    background:#fff url(../img/st-forminput-bg.png) repeat-x top; 
    border:1px solid #D2D4D4; 
    border-top:1px solid #A5A6A6; 
    border-radius:2px; 
    color:#A5A5A5; 
    font:12px Arial, Helvetica, sans-serif; 
    padding:7px 6px;} 
.st-disable{ 
    background:#fafafa;} 
.st-forminput-active{ 
    background:#fff url(../img/st-forminput-bg.png) repeat-x top; 
    border:1px solid #B5B7B7; 
    border-top:1px solid #8E8F8F; 
    border-radius:2px; 
    color:#666666; 
    font:12px Arial, Helvetica, sans-serif; 
    padding:7px 6px; 
    width:auto;} 

.datepicker-input{ 
    background:#fff url(../img/datepicker-bg.png) repeat-x top right; 
    border-radius:2px; 
    color:#666; 
    padding:7px 6px; 
    border:1px solid #D2D4D4; 
    border-top:1px solid #A5A6A6; 
    font:12px Arial, Helvetica, sans-serif;} 

.st-button{ 
    background:url(../img/default-button.png) repeat-x top; 
    font:bold 12px Arial, Helvetica, sans-serif; 
    color:#fff; 
    border:1px solid #1A527D; 
    border-bottom:1px solid #0F3049; 
    border-radius:2px; 
    padding:6px 10px; 
    margin-right:10px; 
    text-shadow: 0px -1px #174B73;} 

.st-button:hover{ 
    border:1px solid #133E5C; 
    border-bottom:1px solid #0B2436;} 

.st-button:active{box-shadow: inset 0 0 0.5em #174B73;} 

.st-clear{ 
    background:#fff url(../img/error-page-buttonbg.png) repeat-x bottom; 
    font:bold 12px Arial, Helvetica, sans-serif; 
    color:#818181; 
    border:1px solid #C5C5C5; 
    border-bottom:1px solid #969696; 
    border-radius:2px; 
    padding:6px 10px; 
    margin-right:10px;} 

.st-clear:hover{ 
    border:1px solid #B1B1B1; 
    border-bottom:1px solid #878787;} 

.st-clear:active{box-shadow: inset 0 0 0.5em #ccc;} 


.st-success-input{ 
    background:#EAF2EC url(../img/st-forminput-bg.png) repeat-x top; 
    border:1px solid #A9CFB0; 
    border-top:1px solid #85A38B; 
    border-radius:2px; 
    color:#55A163; 
    font:12px Arial, Helvetica, sans-serif; 
    padding:8px 6px;} 
.st-form-success{ 
    color:#437E4C; 
    font-size:12px; 
    margin-left:10px;} 

.st-error-input{ 
    background:#FBF4F5 url(../img/st-forminput-bg.png) repeat-x top; 
    border:1px solid #E2B5BE; 
    border-top:1px solid #B28F96; 
    border-radius:2px; 
    color:#99626B; 
    font:12px Arial, Helvetica, sans-serif; 
    padding:8px 6px;} 
.st-form-error{ 
    color:#99616B; 
    font-size:12px; 
    margin-left:10px;} 



/* ================= Chart ================= */ 
.chart{ 
    background:#EAF0F6; 
    padding-bottom:14px;} 

/* ================= Tiny Title ================= */ 
.st-tinytitle{ 
    padding:7px 0 13px 0; 
    border-bottom:1px solid #EBF1F6; 
    margin-bottom:20px;} 
.st-tinytitle h3{ 
    color:#727F88; 
    padding-bottom:5px; 
    font-size:14px;} 
.st-tinytitle p{ 
    color:#87929A; 
    font-size:11px; 
    line-height:15px;} 


/* ================= Alert Boxes ================= */ 
.albox{ 
    font-size:12px; 
    line-height:17px; 
    box-shadow:0px 1px 0px #F7F7F7; 
    position:relative; 
    margin:15px 0px; 
    padding:14px 42px; 
    border-radius:3px;} 
.albox .close{ 
    display:block; 
    position:absolute; 
    width:30px; 
    height:30px; 
    text-indent:-9999px; 
    right:0; 
    top:0; 
    background:url(../img/icons/mini/close-opacity-21.png) no-repeat center;} 
.albox .close:hover{ 
    background:url(../img/icons/mini/close-opacity-42.png) no-repeat center;} 
.albox .icon{ 
    position:absolute; 
    left:14px; 
    top:14px;} 
.warningbox{ 
    background:#FFF8D8 url(../img/icons/error/error.png) no-repeat 14px 14px; 
    border:1px solid #F3D97E; 
    color:#A68510;} 
.succesbox{ 
    background:#EBF9E2 url(../img/icons/error/accept.png) no-repeat 14px 14px; 
    border:1px solid #BEE4A5; 
    color:#658C2C;} 
.informationbox{ 
    background:#E9F3F8 url(../img/icons/error/help.png) no-repeat 14px 14px; 
    border:1px solid #BBD7E4; 
    color:#3876C6;} 
.errorbox{ 
    background:#F8E9E9 url(../img/icons/error/cross.png) no-repeat 14px 14px; 
    border:1px solid #E4BBBC; 
    color:#BF2C11;} 

/* ================= Dialog Boxes ================= */ 
.dialogbox{ 
    background:#F8F8F8; 
    border:1px solid #DEDEDE; 
    color:#666;} 

/* ================= Icon Buttons ================= */ 
.icon-button{ 
    border-radius:4px; 
    margin:2px; 
    padding:8px 10px; 
    border:1px solid #CDDCEA; 
    border-bottom:1px solid #B8C6D2; 
    background:#fff url(../img/iconbutton-bg.png) repeat-x bottom;} 
.icon-button:hover{ 
    border:1px solid #AFC8DD; 
    border-bottom:1px solid #96ABBC;} 
.icon-button img{ 
    margin-bottom:-5px;} 
.icon-button:active{ 
    background:#fff url(../img/icon-button-bg-active.png) repeat-x top;} 
.icon-button span{ 
    padding-left:8px; 
    color:#2E71A5;} 
.icon-button a:hover span{ 
    color:#2E71A5;} 




/* ================= Button Styles ================= */ 
.button-blue{ 
    background:#4088BF url(../img/button-blue.png) repeat-x bottom; 
    font:bold 12px Arial, Helvetica, sans-serif; 
    color:#fff; 
    border:1px solid #1A527D; 
    border-bottom:1px solid #0F3049; 
    border-radius:2px; 
    padding:7px 10px; 
    margin:0px 3px; 
    text-shadow: 0px -1px #174B73;} 
.button-blue:hover{ 
    border:1px solid #0F3049; 
    border-bottom:1px solid #0F3049; opacity:0.95;} 
.button-blue:active{box-shadow: inset 0 0 0.5em #174B73;} 

.button-aqua{ 
    background:#519EAC url(../img/button-aqua.png) repeat-x bottom; 
    font:bold 12px Arial, Helvetica, sans-serif; 
    color:#fff; 
    border:1px solid #27676E; 
    border-bottom:1px solid #173C40; 
    border-radius:2px; 
    padding:7px 10px; 
    margin:0px 3px; 
    text-shadow: 0px -1px #27676E;} 
.button-aqua:hover{ 
    border:1px solid #173C40; 
    border-bottom:1px solid #173C40; opacity:0.95;} 
.button-aqua:active{box-shadow: inset 0 0 0.5em #174B73;} 

.button-green{ 
    background:#51AC53 url(../img/button-green.png) repeat-x bottom; 
    font:bold 12px Arial, Helvetica, sans-serif; 
    color:#fff; 
    border:1px solid #276E27; 
    border-bottom:1px solid #174017; 
    border-radius:2px; 
    padding:7px 10px; 
    margin:0px 3px; 
    text-shadow: 0px -1px #276E27;} 
.button-green:hover{ 
    border:1px solid #174017; 
    border-bottom:1px solid #174017; opacity:0.95;} 
.button-green:active{box-shadow: inset 0 0 0.5em #174017;} 

.button-gray{ 
    background:#fff url(../img/button-gray.png) repeat-x bottom; 
    font:bold 12px Arial, Helvetica, sans-serif; 
    color:#818181; 
    border:1px solid #C5C5C5; 
    border-bottom:1px solid #969696; 
    border-radius:2px; 
    padding:7px 10px; 
    margin:0px 3px; 
    text-shadow: 0px -1px #fff;} 
.button-gray:hover{ 
    border:1px solid #969696; 
    color:#666; 
    border-bottom:1px solid #969696; opacity:0.95;} 
.button-gray:active{box-shadow: inset 0 0 0.5em #ccc;} 

.button-red{ 
    background:#A2665B url(../img/button-red.png) repeat-x bottom; 
    font:bold 12px Arial, Helvetica, sans-serif; 
    color:#fff; 
    border:1px solid #67352E; 
    border-bottom:1px solid #3C1F1B; 
    border-radius:2px; 
    padding:7px 10px; 
    margin:0px 3px; 
    text-shadow: 0px -1px #67352E;} 
.button-red:hover{ 
    border:1px solid #3C1F1B; 
    color:#666; 
    border-bottom:1px solid #3C1F1B; opacity:0.95;} 
.button-red:active{box-shadow: inset 0 0 0.5em #3C1F1B;} 

.button-blue:hover, .button-aqua:hover, .button-green:hover, .button-red:hover{ color:#fff;} 




/* ================= Pagination ================= */ 

.pagination{ 
    text-align:center; 
    padding:20px 0px;} 
.pagination li{ 
    display:inline; 
    text-align:center; 
    font-size:12px; 
    color:#3E7CAC; 
    padding-right:3px; 
    font-weight:bold;} 
.pagination li a{ 
    color:#3E7CAC; 
    border:1px solid #D6D6D6; 
    border-radius:3px; 
    background:url(../img/simplebox-title-bg.png) repeat-x bottom; 
    padding:8px 12px; 
    box-shadow:0px 1px 1px #EDEDED;} 
.pagination li a:hover{ 
    border:1px solid #C5C5C5; 
    color:#333;} 
.pagination li a:active{ 
    box-shadow: inset 0 0 0.5em #D6D6D6;} 


/* ================= Page Wrap ================= */ 
.pagewrap{ 
    background:url(../img/pagewrapbg.png) repeat-x bottom; 
    border-top:1px solid #CBDAE8; 
    border-bottom:1px solid #CBDAE8; 
    font-size:12px; 
    color:#859099; 
    padding-left:5px; 
    height:38px;} 
.pagewrap li{ 
    display:inline; 
    background:url(../img/page-wrap-libg.png) no-repeat right; 
    line-height:38px; 
    padding:12px 20px 12px 8px;} 
.pagewrap a{ 
    color:#859099;} 
.pagewrap a:hover{ 
    color:#344654;} 


/* ================= Statistics ================= */ 
.statistics{ padding:0;} 
.statistics li{ 
    border-bottom:1px solid #E3EBF3; 
    padding:12px 14px; 
    display:block; 
    position:relative;} 
.statistics li p{ 
    display:block; 
    position:absolute; 
    text-align:right; 
    right:14px; 
    top:12px;} 
.statistics .green{ color:#308359;} 
.statistics .blue{ color:#4B789A;} 
.statistics .red{ color:#CD6557;} 

/* ================= Toggle Message ================= */ 
.toggle-message{ 
    background:#F7F9FC url(../img/toogle-message-bg.png) repeat-x top; 
    border:1px solid #CBDAE8; 
    cursor:pointer; 
    border-radius:2px; 
    position:relative; 
    line-height:21px;} 
.toggle-message .title{ 
    color:#40515E; 
    padding:10px 15px;} 
.toggle-message:hover{ 
    border:1px solid #B3C9DD;} 
.toggle-message .title:hover{ 
    color:#344654;} 
.toggle-message .hide-message{ 
    color:#586873; 
    padding:15px; 
    display:none; 
    padding-top:0;} 
.toggle-message .d-icon{ 
    position:absolute; 
    right:15px; 
    top:19px;} 

/* ================= Tabs ================= */ 
#tabs{border:1px solid #fff;} 

/* ================= Sliders ================= */ 
#slider-range-max, #slider-range, #slider{ 
    border:1px solid #D2D4D4; 
    background:#EBF5FE; 
    height:10px; 
    border-top:2px solid #A6A7A7; 
    border-radius:20px;} 

/* ================= Accordion ================= */ 
#accordion{ 
    border-radius:0px;} 
#accordion h3 a{ 
    color:#40515E; 
    border-radius:0px; 
    font:bold 12px Arial, Helvetica, sans-serif; 
    background:none;} 

/* ================= Imagebox ================= */ 
.imagebox{ 
    padding:15px;} 
.imagebox img{ 
    float:left; 
    margin:2px; 
    border:2px solid #fff;} 
.imagebox img:hover{ 
    border:2px solid #215983;} 


/* ================= Loading Box ================= */ 
.loadingbox{ 
    text-align:center; 
    padding:35px 10px; 
    border:1px solid #CBDAE8; 
    color:#9BA4AB; 
    font-size:11px; 
    line-height:19px;} 
.loadingbox h3{ 
    font-size:20px; 
    color:#344654; 
    padding:20px 0px;} 


/* ================= Footer ================= */ 
#footer{ 
    color:#B3C6D5; 
    font-size:11px; 
    line-height:17px; 
    padding:20px 0 0 0;} 
#footer .left-column{ 
    float:left; 
    width:660px;} 
#footer .right-column{ 
    float:right; 
    width:280px; 
    text-align:right;} 


/* ================= Login Form ================= */ 
.loginform{ 
    width:360px; 
    margin:0px auto; 
    margin-top:50px; 
    box-shadow:0px 4px 90px #EEEEEE; 
} 
.loginform .title{ 
    background:url(../img/login-title.png) no-repeat; 
    text-align:center; 
    height:50px; 
    padding-top:20px;} 
.loginform .body{ 
    padding:23px 29px 40px 29px; 
    background:url(../img/login-form-body-bg.png) repeat-x bottom;} 
.login-input-pass{ 
    border:none; 
    font:19px Arial, Helvetica, sans-serif; 
    color:#B6C3C9; 
    width:250px; 
    border:1px solid #CED3D8; 
    border-radius:3px; 
    border-top:1px solid #A0A4A9; 
    padding:10px; 
    padding-left:40px; 
    margin-bottom:19px; 
    background:url(../img/password-input.png) repeat-x top;} 
.login-input-pass-active{ 
    border:none; 
    font:19px Arial, Helvetica, sans-serif; 
    color:#8A9EA8; 
    width:250px; 
    border:1px solid #CED3D8; 
    border-radius:3px; 
    border-top:1px solid #A0A4A9; 
    padding:10px; 
    padding-left:40px; 
    margin-bottom:19px; 
    background:url(../img/password-input.png) repeat-x top;} 
.login-input-user{ 
    border:none; 
    font:19px Arial, Helvetica, sans-serif; 
    color:#B6C3C9; 
    width:250px; 
    border:1px solid #CED3D8; 
    border-radius:3px; 
    border-top:1px solid #A0A4A9; 
    padding:10px; 
    padding-left:40px; 
    margin-bottom:19px; 
    background:url(../img/username-input.png) repeat-x top;} 
.login-input-user-active{ 
    border:none; 
    font:19px Arial, Helvetica, sans-serif; 
    color:#8A9EA8; 
    width:250px; 
    border:1px solid #CED3D8; 
    border-radius:3px; 
    border-top:1px solid #A0A4A9; 
    padding:10px; 
    padding-left:40px; 
    margin-bottom:19px; 
    background:url(../img/username-input.png) repeat-x top;} 

.loginform .log-lab{ 
    color:#A4AAB2; 
    font-size:14px; 
    font-weight:bold; 
    display:block; 
    padding-bottom:11px;} 
.loginform .button{ 
    width:300px; 
    height:49px; 
    font:bold 16px Arial, Helvetica, sans-serif; 
    color:#fff; 
    background:url(../img/login-button.png) no-repeat 0px 0px; 
    border:none;} 
.loginform .button:hover{ 
    background:url(../img/login-button.png) no-repeat 0px -50px;} 
.loginform .button:active{ 
    background:url(../img/login-button.png) no-repeat 0px -100px;} 

/* input */ 
input.post_input,select.post_select { 
    font-family:trebuchet MS,Lucida Sans Unicode, Lucida Sans, Sans-Serif; 
    background-color:#F9F9F9; 
    width:160px; 
    border:1px solid #ccc; 
    color:#181818; 
    font-size:1em; 
    padding:5px; 
} 
input.post_input { 
    width:160px; 
} 
/* Max lenght */ 
.notification { 
    border:3px solid #d55b5b; 
    background-color: #ffcdcd; 
    padding:5px; 
} 

Answer 1

변경이 : 또한

#page { 
width: 789px; 
float: left; 
padding-right: 1px; 
position: relative; 
} 

당신이 작은 화면에 대한 주요 컨테이너에 폭을 넣어해야합니다

#main { 
width: 1000px; 
} 

여기

는 CSS입니다

Answer 2

당신은 고정 폭을 기반으로 사이트를 디자인 한 - 빠른 수정뿐만 아니라 몸의 너비를 설정하는 것입니다 -

body { 
width: 980px; 
} 

당신이 정말로 당신의 위치에 좋아 보이는하려면 더 큰 (작은 화면)을 사용하려면 반응 형 디자인 솔루션을 적용하는 것이 좋습니다. 위대한 프레임 워크는 zurb 기초를 포함합니다 : http://foundation.zurb.com/뿐만 아니라 트위터 부트 스트랩 : http://twitter.github.com/bootstrap/

Answer 3

솔루션은 까다 롭지 만 완전히 할 수 있습니다! 전 직장에서 비슷한 문제를 해결해야했습니다. 모든 화면 해상도에 맞는 2 열 스타일의 레이아웃이있었습니다.

FIRST (우리는 폭을 나중에 다룰 것입니다.) 두 개의 열 ("사이드 바"와 "페이지")에 대해 "테이블과 같은"느낌을 내고 싶습니다. 즉, 사이드 바가 내용보다 크면 페이지에서 "페이지"열의 배경이 아래쪽 (세로 막대와 동일한 높이)까지 확장되어야하며 반대의 경우도 마찬가지입니다. 다음과 같이이를 위해, 우리는 조금 DIV-ception을 수행

우리가 여기에서 수행 할 작업을

<div id="main"> 
    <div id="two_columns"> 
     <div id="sidebar"> 
      <!-- Content goes here --> 
     </div> 
     <div id="page"> 
      <!-- Content goes here --> 
     </div> 
     <!-- Cross-browser clearing of floats --> 
     <div style="clear:both;"></div> 
    </div> 
</div> 

는 "기본"줄은 "페이지"와 같은 배경을 "two_columns"를 "사이드 바"와 같은 배경 . 이렇게하면 "사이드 바"또는 "페이지"가 ​​높이로 커질 때 "주"와 "두 열"모두 높이가 증가하게됩니다.

두 번째로, 모든 화면 해상도에 맞출 수 있기를 바랍니다. 다행히도,이 div-ception 설정은 이에 적합합니다. 우리는 단순함을 위해 배경이 색상이라고 가장합니다.

#main { 
    /* 
     No width shall be set! It will expand to 
     fit inside its parent. 
    */ 
    background-color:#e5e5e5; 
    border:1px solid #aeaeae; /* I think borders are pretty */ 
} 

#two_column { 
    margin-left:190px; /* width is 190px less than parent ("main") */ 
    background-color:#fff; 
} 

#sidebar { 
    margin-left:-190px; 
    float:left; 
    width:189px; 
    border-right:1px solid #aeaeae; /* Borders are pretty */ 
} 

#page { 
    float:right; 
    /* 
     Fill to width of parent container "two_column" which 
     is "main"s width - 190 (and "main" might be the same 
     width as the body, if you so choose). 
    */ 
    width:100%; 
} 

그리고 붐! 그렇게해야합니다.