I am trying to create a flash header like element in JQuery, that has three images that fade to other images. I have each group of images in a div, but the divs line up vertically down the page, I want them to line up horizontally in a row.
Currently my css code is:
div#demos{
width:940px;
border:0;
}
.s1{
float:left;
display:inline;
background-color:#000000;
width:225px;
margin:0;
}
.s2{
float:right;
display:inline;
background-color:#000000;
width:225px;
margin:0;
}
.s3{
float:left;
display:inline;
background-color:#000000;
width:225px;
margin:0;
}
and my markup is:
<div id="demos">
<div id="s1" class="pics">
<img src="Image1.jpeg" width="
200" height="
200" />
<img src="Image2.jpeg" width="
200" height="
200" />
<img src="Image3.jpeg" width="
200" height="
200" />
</div>
<div id="s2" class="pics">
<img src="Image4.jpeg" width="
200" height="
200" />
<img src="Image5.jpeg" width="
200" height="
200" />
<img src="Image6.jpeg" width="
200" height="
200" />
</div>
<div id="s3" class="pics">
<img src="Image7.jpeg" width="
200" height="
200" />
<img src="Image8.jpeg" width="
200" height="
200" />
<img src="Image9.jpeg" width="
200" height="
200" />
</div>
<div style="clear:both"></div>
</div>
