CODEWITHSUNDEEP
htmlcss
user1274810
user1274810

Reputation: 119

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

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

Upvotes: 2

Views: 3375

Answers (5)

kongaraju
kongaraju

Reputation: 9606

Use css3 box modal for best results.

#contentImages{
    display:-webkit-box;
    -webkit-box-align:center;
    -webkit-box-pack: center;
}

Upvotes: 0

grooble
grooble

Reputation: 637

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!

Upvotes: 0

jmbertucci
jmbertucci

Reputation: 8254

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.

Upvotes: 2

Matthew Darnell
Matthew Darnell

Reputation: 4588

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

Upvotes: 2

calebds
calebds

Reputation: 26238

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

Upvotes: 1

Related Questions