Question

I have 3 divs inside 1 div like so..

<div class="contentImages">

<div id="slideshow">    
<img src="upload/<?php echo $array['image'] ?>" height="200" class="active" />    
<img src="upload/<?php echo $array['image2'] ?>" height="200" />    
<img src="upload/<?php echo $array['image3'] ?>" height="200" />    
</div>

<div id="slideshow2">    
<img src="upload/<?php echo $array['image4'] ?>" height="200" class="active" />   
<img src="upload/<?php echo $array['image5'] ?>" height="200" />    
<img src="upload/<?php echo $array['image6'] ?>" height="200" />    
</div>


<div id="slideshow3">    
<img src="upload/<?php echo $array['image7'] ?>" height="200" class="active" />    
<img src="upload/<?php echo $array['image8'] ?>" height="200" />    
<img src="upload/<?php echo $array['image9'] ?>" height="200" />    
</div>

</div>

Taken from here.

Currently the divs go underneath each other, but I am trying to get them to go side by side….any ideas?

here is the css:

#slideshow {
    position:relative;
    height:200px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}


#slideshow2 {
    position:relative;
    height:200px;
}

#slideshow2 IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow2 IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow2 IMG.last-active {
    z-index:9;
}

#slideshow3 {
    position:relative;
    height:200px;
}

#slideshow3 IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow3 IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow3 IMG.last-active {
    z-index:9;
}

.contentImages{
    border:1px solid #CCC; 
    padding:10px; 
    margin:20px auto 0; 
    position:relative; 
    width:811px;
}

Is there something I am missing here?
The reason I have 3 images per a div is because I have 3 jquery slideshows going on, one per a div. The jquery code is long, so i don’t I need it for this problem.

Any help would be gratefully appreciated, thanks,
J

Answer 1

#contentImages {
    overflow:hidden;
}
#slideshow, #slideshow2, #slideshow3 {
    width:268px;
    overflow:hidden;
    float:left;
}