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>