3 divs inside one div, trying to get them side by side - html

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;
}

Answer 2

DIV are block level elements. That means they're going to stack by their default nature. You have to override this somehow. Two options would be to:
#contentImages > div { display:inline-block; }
or
#contentImages > div { float:left; }
Hope that helps.
edit
See comment below about how to support inline-block in older browsers and clearing floated containers, depending on which method you prefer.

Answer 3

By default, divs are styled with display: block, which makes an element take up all the horizontal space available to it. To change this, add the following rule:
#contentImages > div {
display: inline-block;
}
displayMDN

Answer 4

As you can see from the other answer on this page, getting three things to line up in all browsers is a bitch.
I did it on my site by applying a three column layout in CSS.
It takes more effort to set up, but it works in all browsers and is robust.
There are many descriptions out there but here's the one I used:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
This uses percentages rather than set sizes, so it works for many screen configurations.
You can also make workable but unreadable (and unmaintainable?) html by nesting columns.
(I have a three column layout, inside the middle column of a three column layout. looks great! - the page, not the HTML ;)
Good luck!

Answer 5

Use css3 box modal for best results.
#contentImages{
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack: center;
}