[CSS] Classe con div a capo

Ciao a tutti, scusate per il titolo..ma non sapevo quale dare :)
Cmq il mio problema è questo ho scaricato un template (Dreamy@Ginger Ninja!) e voglio modificare questo pezzo dove spunta un icona e accanto il numero dei commenti:

<div class="comments"><a href="#">3 commenti</a></div> 

e questo è il codice CSS:

.comments {
    margin-top:-1em;
    }
.comments a {
    color: #6CC7DC;
    background:url(images/icon-comment.png) no-repeat 0px 2px;
    padding-left:20px;
    padding-right:2px;
    }
.comments a:hover {
    color: #B4C835;
    } 

Ora io ho aggiunto questo:

<div class="comments"><a href="#">3 commenti</a></div> <div class="category"><a href="#">Lotti Residenziali</a></div> <div class="author"><a href="#">Davide</a></div> 

e il CSS:

.comments {
    margin-top:-1em;
    }
.comments a {
    color: #6CC7DC;
    background:url(images/icon-comment.png) no-repeat 0px 2px;
    padding-left:20px;
    padding-right:2px;
    }
.comments a:hover {
    color: #B4C835;
    }
/*.category {
    margin-top:-1em;
    }*/
.category a {
    color: #6CC7DC;
    background:url(images/report.png) no-repeat 0px 2px;
    padding-left:20px;
    padding-right:2px;
    }
.category a:hover {
    color: #B4C835;
    }
/*.author {
    margin-top:-1em;
    }*/
.author a {
    color: #6CC7DC;
    background:url(images/user_gray.png) no-repeat 0px 2px;
    background:url(images/user_gray.png) no-repeat 0px 2px;
    padding-left:20px;
    padding-right:2px;
    }
.author a:hover {
    color: #B4C835;
    } 

Perchè ogni div mi spunta a capo?:
$ 3 commenti
$ Lotti Residenziali
$ Davide
Io vorrei che spuntasse così:
$ 3 commenti $ Lotti Residenziali $ Davide...
Grazie.Ciao Davide! :)
PS: $ = Img che è nel CSS! :)

[hackharo]

Quale titolo?

Comunque i div son fatti così...prova con <span></span>

[dementialsite]

Devi aggiungere lo stile display:inline ai DIV di classe .comments...

Stammi bene...

Ok, Grazie! :)
...se volete potete chiudere!
Ciao! :D