div 너비로 이동 하시겠습니까?

Question

CSS에서 내 div의 너비가 설정되어 있지만 해당 너비를 벗어나는 div의 내용이 필요하지만 해결 방법을 찾을 수 없습니다.

#wrapper { 
    width: 845px; 
    margin: 0 auto; 
} 

#wrapper #content { 
    width: 630px; 
    float: left; 

} 

#wrapper #content .post { 

    background-image: url('images/black_linen_v2.png'); 
    padding: 10px; 
    color: white; text-shadow: black 0.1em 0.1em 0.2em; 
    position: relative; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 



} 

#wrapper #primary { 
    color: white; 
       } 

#wrapper #primary .widget-container { 
    color: white; text-shadow: black 0.1em 0.1em 0.2em; 
    padding: 10px; 

    background-image:url('images/black_linen_v2.png'); 
    position: relative; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 

} 

을 그리고 여기가 그 지역을 넘어 갈 필요가있는 작업은 다음과 같습니다 : 여기 내 CSS이야 내가 그 설정 폭을 넘어 필요 ".ribbon"와

/* This is the ribbon effect */ 
.ribbon { 
    background: #36ff36; 
    background: -moz-linear-gradient(top, #36ff36, #21b521); 
    background: -webkit-gradient(linear, left top, left bottom, from(#36ff36), to(#21b521)); 
    padding: 10px 10px; 
    margin-left: 50px; 
    margin-top: 0; 
    position: relative; 
    width: 100%; 

    -moz-box-shadow: 1px 1px 3px #292929; 
    -webkit-box-shadow: 1px 1px 3px #292929; 

     /*round the top corners */ 
    -webkit-border-top-left-radius: 10px ; 
    -webkit-border-top-right-radius: 10px; 
    -moz-border-top-left-radius: 10px ; 
    -moz-border-top-right-radius: 10px ; 
    border-top-right-radius: 10px ; 
    border-top-left-radius: 10px ; 


    color: #454545; 
    text-shadow: 1px 1px 0 #36ff36; 
    text-align:center; 
} 

.arrowl { 
    width: 0; height: 0; 
    line-height: 0; 
    border-left: 20px solid transparent; 
    border-top: 10px solid #21b521; 
    top: 104%; 
    left: 0; 
    position: absolute; 
} 
.arrowr { 

    width: 0; height: 0; 
    line-height: 0; 
    border-right: 20px solid transparent; 
    border-top: 10px solid #21b521; 
    top: 104%; 
    right: 0; 
    position: absolute; 
} 

#footer {position: relative; 
    background-image:url('../images/footer.png'); 
    margin-top: -150px; /* negative value of footer height */ 
    height: 150px; 
    clear:both;} 
/* End of ribbon effect*/ 

세트 폭 충돌.

도움주세요.

Answer 1

에 overflow:visible을 설정하고 .ribbon 또는 패딩의 너비 (110 %)가 더 큽니다.

Answer 2

추측 게임이 될 HTML을 게시하십시오. 그러나 컨테이너 외부에있는 항목을 만들려면 컨테이너에 overflow 속성을 설정해야합니다.

Answer 3

개체를 고정 위치로 설정할 수 있습니다. 그런 다음 위치와 치수를 정의하십시오. 상위 컨테이너의 속성이 overflow:visible인지 확인하십시오. 자녀 요소는 다음과 같습니다.

position: fixed; 
width:*; 
height:*;