I have come across similar questions, but the answers don't quite fit my scenario. I am dealing with a content width of 940px and I want to use an 'easel' as a background for my slideshow. The easel image extends about 400px beyond the content width, causing the horizontal scroll bar to appear at 940px plus the easel width of 400px. However, I only want the scrollbar to show up when the content is 940px or less. Is there a simple solution that I am missing?
<div id="showcase">
<div class="content">
<div class="left">
<h1>Lidya Aaghia Tchakerian</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
<div id="slideshowArea">
<div id="slideshow">
<ul class="bjqs">
<li><img src="images/slider1.jpg" width="326" height="534" alt="" /></li>
<li><img src="images/slider1.jpg" width="326" height="534" alt="" /></li>
<li><img src="images/slider1.jpg" width="326" height="534" alt="" /></li>
<li><img src="images/slider1.jpg" width="326" height="534" alt="" /></li>
</ul>
</div>
</div>
</div>
</div>
Here is my css:
/* showcase
------------------------------------------*/
#showcase {
position: relative;
padding: 40px 0 0 0;
height: 828px;
background: #fafafa;
border: 1px solid #d8d8d8;
}
#showcase .left {
position: absolute;
width: 388px;
top: 200px;
text-align: center;
}
#slideshowArea {
position: absolute;
width: 824px;
left: 495px;
height: 875px;
background: url('../images/easel.png') no-repeat;
}
#slideshow {
display: block;
position: relative;
left: 72px;
height: 534px;
width: 326px;
border: none;
top: 107px;
}
#slideshow ul {
position: relative;
z-index: 99;
width: 326px;
}
ul .traits {
padding: 0;
float: left;
margin: 10px 0 0 30px;
}
.traits li {
color: #fff;
float: left;
display: block;
margin-right: 25px;
padding: 6px 0 0 22px;
background: url('../images/checkbox.png') no-repeat 0 0;
height: 30px;
list-style: none;
}
Any assistance would be greatly appreciated.
Thank you, Nathan
EDIT: For reference, you can view the page at