how to put 6 divs in the same line?

Question

Im having this problem of trying to put 6 divs in a row and each div is being used as a sprite. What's happening is 2 are staying on top inside the containing div and the other 4 are below outside of the containing div. I have researched to make every div float left with containing div having width to match the 6 div's width total sizes. I also found on another question here to use <br style="clear: left;" /> after the sixth div but still inside the containing div but that doesnt seem to fix my problem. This containing div is inside of the footer div aswell.

css:

#footer {
    width: 100%;
    height: 135px;
    background-color:#444;}

#sprite {
    margin: 0 auto;
    width: 602px;
    height: 35px;
    /*background-image: url(images/sprite.png);
    background-repeat: no-repeat;
    background-position: left top;*/
}


#ash {
    width: 113px;
    height: 35px;
    float: left;
    background: url(images/images/sprite1_01.png) no-repeat 0 0;
}

#ash:hover {
    background-position:0 -35px;

}

#gateway {
    margin: 0 auto;
    width: 113px;
    height: 35px;
    background: url(images/images/sprite1_02.png) no-repeat 0 0;
}

#gateway:hover {
    background-position:0 -35px;

}

#conect {
    width: 113px;
    height: 35px;
    float: left;
    background: url(images/images/sprite1_03.png) no-repeat 0 0;
}

#conect:hover {
    background-position:0 -35px;

}

#peninsula {
    width: 113px;
    height: 35px;
    float: left;
    background: url(images/images/sprite1_04.png) no-repeat 0 0;
}

#peninsula:hover {
    background-position:0 -35px;

}

#aza {
    width: 75px;
    height: 35px;
    float: left;
    background: url(images/images/sprite1_05.png) no-repeat 0 0;
}

#aza:hover {
    background-position:0 -35px;

}

#greenscape {
    width: 75px;
    height: 35px;
    float: left;
    background: url(images/images/sprite1_06.png) no-repeat 0 0;
}

#greenscape:hover {
    background-position:0 -35px;

}

html:

<div id="sprite">


            <div id="ash">

            </div> <!-- end of ash div-->

            <div id="gateway">

            </div> <!--end of gateway -->

            <div id="conect">

            </div> <!-- end of conect -->

            <div id="peninsula">

            </div> <!-- end of peninsula -->

            <div id="aza">

            </div> <!-- end of aza -->

            <div id="greenscape">

            </div> <!-- end of greenscape -->


        <br style="clear: left;" />


</div> <!-- end of sprite -->

Below is a picture how it is sitting in a browser.

Answer 1

You missed this.

#gateway {
    float: left;
}