Dwa paragrafy w jednej linii.

Witam, czy jest opcja umieszczenia dwóch paragrafów w jednej linii?
Jeżeli tak, to w jaki sposób?
Tak to mniej więcej wygląda:



Kod odpowiedzialny za te "belki":

CSS:

#p1{

font-size: 13px;
    width:15%;
    height:45px;
margin-left: 287px;
margin-top: 10px;
    background: #0260A7;
}
#p2{
font-size: 13px;
    width:55%;
    height:45px;
margin-left: 287px;
margin-top: 10px;
    background: #0260A7;
}

HTML:

<div id="p1">
<br><font face="Trebuchet MS" color="#ffffff"><p style="margin-top: -0px; margin-left: 10px;text-align: left"><b>Kategoria:<br></b></div>

<div id="p2">
<br><font face="Trebuchet MS" color="#ffffff"><p style="margin-top: -0px; margin-left: 10px;text-align: left"><b>Utwory:<br></b></div>

Pozdrawiam.

#p1{

   font-size: 13px;
   width:15%;
   height:45px;
   background: #0260A7;
   float: left;
}
#p2{
   font-size: 13px;
   width:55%;
   height:45px;
   background: #0260A7;
   float: left;

} 


Niestety nie działa, obrazki się rozjechały i nachodzą na siebie..

jak to ie dziala?
http://jsfiddle.net/sbe4d1qt/
jakie obrazki?

TFU.. nie obrazki, chodziło mi o paragrafy z niebieskim tłem.
Paragrafy już się elegancko wyświetlają, tylko mam problem z wyśrodkowaniem.

Dodałem do #p1 oraz #p2 "margin: 0 auto;", ale dalej jest z lewej strony.
Czego mam użyć, aby te dwa paragrafy były na środku strony?

Ale co ty chcesz na środku strony? Tekst, czy całość?

Daj link do strony

Chodzi mi o to, aby te 4 paragrafy były obok siebie, tytuł obok tytułu oraz zawartość obok zawartości.
Chyba wiecie o co chodzi, niebieskie obok niebieskiego, szare obok szarego.

I chcę, aby Kategoria miała ok. 30%, a utwory 50%, i całość była wyśrodkowana do środka.

---

odświeżam

Odświeżam..

Zrób to za pomocą tabelki, jeśli o to ci chodzi.
http://www.w3schools.com/tags/tag_table.asp