CSS fluid elements running into each other - css

Question

I'm having some trouble with my css and I was gonna post on stackoverflow but I thought maybe this would be the right place to post seeing its strictly a css problem. I have a jquery cycle plugin tor rotate images and I want to have a block of text to the right of the the rotator but I don't want it to run into the rotator and I also would like it to not crop of when the page is shrunk within reason. right now if you pull the browser window in to the left it just slides under the rotator I would much rather the rotator move to the left as well until it can't anymore then the text should start expanding downward if that is even possible. but I cant seem to figure it out.
here is the site http://falconesuits.com/
hdere is the css (well at least the important part)
#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

One approach that might help is to restructure your html by putting your story and slideshow in the same div container:
<div id="content">
<div id="story2">...</div>
<div class="slideshow">...</div>
</div>
Then styling #content so that it has the fluid margins instead.
#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;
}
As for expanding the text downwards, you could try setting your #story width to a percentage instead of a fixed pixel value, I guess.