Элементы смазки CSS, которые работают друг с другом

Question

У меня возникли проблемы с моим css, и я собирался опубликовать в stackoverflow, но я подумал, что, возможно, это будет подходящее место, чтобы опубликовать его строгое задание css. У меня есть плагин jquery cycle, который поворачивает изображения, и я хочу иметь блок текста справа от ротатора, но я не хочу, чтобы он работал в ротаторе, и я также хотел бы, чтобы он не обрезался, когда страница сокращается в пределах причины. прямо сейчас, если вы потянете окно браузера влево, он просто скользит под поворотным механизмом, я бы скорее сделал поворот влево, пока он больше не сможет, тогда текст должен начать расширяться вниз, если это возможно. но я не могу понять это.

здесь сайт http://falconesuits.com/ hdere является CSS (ну по крайней мере, важная часть)

#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

Один из подходов, которые могли бы помочь в реструктурировать свой HTML, поставив свою историю и слайд-шоу в том же div контейнере :

<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 ширину в процентах вместо значения фиксированного пикселей, я думаю.