CSS Navigation images wont stop stacking

Question

This is my first time using this site, I am stuck trying to make some rollover navigation. All of the images will do the hover over effect but they are stacking on top of each other instead of next to each other. How do I get them to layout horizontally instead of vertically?

My code is below.

CSS:

html, body{margin: 0; padding: 0; background-color: #c0c0c0;}
p{width:900px; position: relative; left: 30px;}
h2{width:900px; position: relative; left: 30px;}
.container{width:960px; margin: auto;}  

.header{height: 124px;}                     
.navigation{height: 59px; width: 960px;}

.navigation1{
        display: block;
    width: 136px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_01.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation1:hover{background-position:0px 0px;}

.navigation2{
        display: block;
        width: 138px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_02.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation2:hover{background-position: 0 0;}

.navigation3{
        display: block;
        width: 170px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_03.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation3:hover{background-position: 0 0;}

.navigation4{
        display: block;
        width: 138px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_04.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation4:hover{background-position: 0 0;}

.navigation5{
        display: block;
        width: 168px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_05.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation5:hover{background-position: 0 0;}

.navigation6{       
        display: block;
        width: 210px;
    height: 59px;
        background-image: url('http://fakehost:8888/TheWorksPlumbing/images/navigationImages/nav_06.jpg');
    background-position:0px -59px;
        text-indent: -99999px;
}
.navigation6:hover{background-position: 0 0;}

.mainAd{height: 271px;}                     
.mainbody{background-color: white;}
.map{position: relative; left: 30px;}
.footer{height: 197px;} 

HTML:

        <div class="container">
            <div class="header"><img src="http://localhost:8888/TheWorksPlumbing/images/Layout_01.jpg"></div>
             <div class="navigation" >
                 <div class="navigation1"><a href="home">Home</a></div>
                 <div class="navigation2"><a href="about">About</a></div>
                 <div class="navigation3"><a href="services">Services</a></div>
                 <div class="navigation4"><a href="rates">Rates</a></div>
                 <div class="navigation5"><a href="specials">Specials</a></div>
                 <div class="navigation6"><a href="contact">Contact</a></div>
             </div>
</div>

Answer 1

float: left;

on each of your navigation elements will make them horizontal.

Although I think your code is overly complicated. Maybe try using a list and condensing your common styles under

ul.navigation li {
     float: left
     .....
}

Also, you will likely need to add overflow: hidden to the parent element so that it wraps around the floated list items of your navigation.

ul.navigation {
    width: 960px;
    overflow: hidden;
}

Answer 2

add this css:

.navigation div {
    float: left;
}