중복 된 CSS 열

Question

중복되는 열에 약간의 문제가 있습니다. 기본적으로 나는 3 개의 열을 가지고 있고 중간 열에있는 내용은 오른쪽 열에 의해 중첩되어 있습니다. 나는 중간 열에있는 내용이 평소보다 커질 때 오른쪽 열을 확장 할 수 없었기 때문에 나는 CSS 아마추어 다. 중간 열을 더 넓게 만들려고하면 오른쪽 열이 아래로 떨어지고 모든 것이 정렬에서 벗어납니다. 사전에

#content { 
width:960px; 
margin:0 auto 20px; 
overflow:visible 
} 

.c_middle { 
width:960px; 
background: transparent url(../images/content_middle.gif) repeat-y top center; 
} 
.c_left { background: transparent url(../images/content_left.gif) repeat-y top center;} 
.c_right {background: transparent url(../images/content_right.gif) repeat-y top center;} 
.c_full {background: none;} 

#leftcolumn, #rightcolumn { 
float: left; 
width: 210px; 
margin: 0 10px 0 0; 
} 

#rightcolumn { 
margin: 0 0 0 10px; 
} 

div#maincolumn { 
float: left; 
width: 500px; 
padding:0 10px; 
} 

div#maincolumn_full { 
float: left; 
width: 960px; 
padding:0 0 10px; 
} 

div#maincolumn_left { 
float: left; 
width: 720px; 
padding:0 10px 10px; 
} 

div#maincolumn_right { 
float: left; 
width: 720px; 
padding:0 10px 10px; 
} 

감사 :

이

는 CSS 코드입니다.

Answer 1

960px 프로젝트를 제작하고있는 것처럼 보입니다. 휠을 다시 열지 않고 960 Grid System을 사용하지 않으십시오. 이 열을 사용하여 현재 가지고있는 문제를 신속하고 고통없이 해결할 수 있습니다.

<link rel="stylesheet" href="css/reset.css" /> 
<link rel="stylesheet" href="css/text.css" /> 
<link rel="stylesheet" href="css/960.css" /> 

<div class="container_12"> 
    <div class="grid_3 alpha"> 
    <p>Left Column</p> 
    </div> 
    <div class="grid_6"> 
    <p>Center Column</p> 
    </div> 
    <div class="grid_3 omega"> 
    <p>Right Column</p> 
    </div> 
    <div class="clear"></div> 
</div> 

Answer 2

마크 업이 없으면 알 수 없지만 경우에 따라 너비 + 여백 + 패딩이 수평으로 960px를 초과하는 것으로 보입니다. 그러나 다시 말하지만, 중첩 된 마크 업을 어떻게 알지 못하면 말할 수 없습니다.

그리고 조나단 샘슨 (Jonathan Sampson)에 동의합니다. 960 그리드 시스템을 재발 명하는 데는 아무런 의미가 없습니다. 이 기능을 사용하게되면 일부 브라우저에서 이상한 문제가 발생하더라도 필연적으로 문제가 발생할 수 있습니다. 왜 모든 것을 통해 이미 노력한 다른 사람들의 노력을 활용하지 않는 것일까 요?