2013-08-21 7 views
0

CSS는 나에게 약간의 두통을주고 있습니다. 내 페이지에 대한이 형식을 가지고 있으며 컨텐츠를 센터에 추가하려고합니다. 화면 크기에 따라 콘텐츠가 움직이거나 뜨는 문제가 있습니다. 화면에는 좋지만 화면이 넓은 사람에게는 모양이 다릅니다. 모든 제안과 도움을 주시면 감사하겠습니다.CSS 콘텐츠가 다른 크기의 화면에 표시됩니다.

#navcontainer { 
    width: 150px; 
    height: 500px; 
    margin-top:auto; 
}   
#navcontainer ul { 
    margin-left: 0; 
    padding-left: 0; 
    list-style-type: none; 
    font-family: Arial, Helvetica, sans-serif; 


} 
#navcontainer a:link, #navlist a:visited { 
    color: #2200CC; 
    text-decoration: none; 
    display:block; 
    height:30px; 
} 
#navcontainer a:hover { 
    background-color: #369; 
    color: #fff; 
    display:block; 
    height:30px; 
} 
#navcontainer { 
    font-family: verdana,tahoma,helvetica; 
    font-size: 10pt; 
    background-color: #99CCFF; 
    border-top-width: 0; 
    border: solid 3px #d7d7d7; 
    border-top-color: #99CC66; 
    margin-left: 10pt; 
    float:left; 
    margin-top:-22px; 
    padding-left:20px; 
} 
#navcontainer #selected a { 
    background-color: white; 
    color:Black; 
} 
.basictab { 
    padding: 3px 0; 
    margin-left: 189px; 
    font: bold 12px Verdana; 
    border-bottom: 1px solid gray; 
    list-style-type: none; 
    text-align: left; /*set to left, center, or right to align the menu as desired*/ 
} 
.basictab li { 
    display: inline; 
    margin: 0; 
} 
.basictab li a { 
    text-decoration: none; 
    padding: 3px 7px; 
    margin-right: 3px; 
    border: 1px solid gray; 
    border-bottom: none; 
    background-color: #f6ffd5; 
    color: #2d2b2b; 
} 
.basictab li a:visited{ 
    color: #2d2b2b; 
} 
.basictab li a:hover{ 
    background-color: #DBFF6C; 
    color: black; 
} 
.basictab li a:active{ 
    color: black; 
} 
.basictab li.selected a{ /*selected tab effect*/ 
    position: relative; 
    top: 1px; 
    padding-top: 4px; 
    background-color: #DBFF6C; 
    color: black; 
} 
body { 
    margin:0; 
    padding: 0; 
    text-align: left; 
    font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif; 
    font-size: 13px; 
    color: #061C37; 
} 
* { 
    margin: 0 auto 0 auto; 
    text-align:left;  
} 
.contentBox { 
    width:auto; 
    height:auto; 
    background-color:#FFFFFF; 
    margin-top:10px; 
    float:left; 
    display:inline; 
    margin-left:210px; 
    margin-top:-400px; 
} 
.contentBox .innerBox { 

    height:auto; 
    top:10px; 
    margin-left:10px; 
    padding-bottom:35px; 
} 
#GridView1 { 
    margin-left:130px; 
} 

http://jsfiddle.net/TMKev/

감사

답변

0

화면 전체를 차지하는 전체 페이지의 고정 너비에 대해 이야기하고 있습니까?

CSS

.wrapper { 
    border: 1px solid #ccc; 
    margin: 0 auto; 
    width: 960px; 
} 

.sidecol { 
    background: #ccc; 
    margin-right: 2%; 
    width: 18%; 
} 

.main-content { 
    background: #efefef; 
    width: 80%; 
} 

.sidecol, .main-content { 
    float: left; 
    height: 400px; 
} 

HTML

<div class="wrapper"> 
    <aside class="sidecol"> 
    <h3>My sidebar</h3> 
    </aside> 
    <section class="main-content"> 
    <h3>Content</h3> 
    <p> My content</p> 
    </section> 
</div> 

Codepen sketch

관련 문제