CSS 유체 요소가 서로 겹쳐져 있습니다

Question

내 CSS에 문제가 있습니다. stackoverflow에 게시 할 예정 이었지만이 문제는 엄격하게 CSS 문제를보고 게시 할 수있는 최적의 장소라고 생각했습니다. jquery cycle plugin tor 이미지를 회전시키고 Rotator 오른쪽에 텍스트 블록을 넣고 싶습니다. 그러나 회전 자로 실행되는 것을 원하지 않습니다. 또한 페이지가 잘릴 때 자르기를 원하지 않습니다. 이성 안에서 줄어들었다. 지금 당장 브라우저 창을 왼쪽으로 당기면 로테이터 아래에서 미끄러진다. 로테이터가 왼쪽으로 움직이면 더 이상 텍스트를 볼 수 없을 때까지 텍스트가 아래로 확장되기 시작해야한다. 그러나 나는 그것을 알아낼 것 같지 않다. 여기

는 (물론 적어도 중요한 부분) 같은 div 용기에 당신의 이야기와 슬라이드 쇼를 넣어 당신의 HTML을 재구성하는 것입니다 도움이 될 수 있습니다

#story2 { 
margin: 100px; 
width:300px; 
float:right; 
color:#FFF; 
} 
.slideshow { 
    width:300px; 
    height:450px; 
    background: #cc9966; /* for non-css3 browsers */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cc9966)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #fff, #cc9966); /* for firefox 3.6+ */ 
    min-height: 100%; 
    border:10px; 
    border-style:groove; 
    border-color:#939598; 
    margin-left: auto; 
    margin-right: auto; 
    top: 100px; 
} 

Answer 1

한 가지 방법 사이트 http://falconesuits.com/ hdere는 CSS입니다 :

<div id="content"> 
    <div id="story2">...</div> 
    <div class="slideshow">...</div> 
</div> 

그럼 대신 유체 마진을 갖도록 #content 스타일링. 아래 텍스트 확장에 관해서는

#content { 
    overflow: hidden; 
    margin: 0 auto; 
    width: 650px; 
    margin-top: 100px; 
} 

#story2 { 
    width: 300px; 
    float: right; 
    color: #fff; 
} 

.slideshow { 
    float: left; 
    width:300px; 
    height:450px; 
    background: #cc9966; /* for non-css3 browsers */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cc9966)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #fff, #cc9966); /* for firefox 3.6+ */ 
    min-height: 100%; 
    border:10px; 
    border-style:groove; 
    border-color:#939598; 
} 

, 당신은 대신 고정 된 픽셀 값의 비율에 #story 폭을 설정을 시도 할 수 같아요.