Buongiorno gente
sto combattendo da un pò con un problema abbastanza stupido e fastidioso ma non riesco a venirne a capo
Il mio problema è che devo affiancare un immagine e un testo, per farvi capire meglio il risultato è anzi dovrebbe essere questo:


Il problema è che chiaramente va a capo il testo e esce anche dal div della barra alta che vedete, andando a finire nella parte dedicata al sito con lo sfondo azzurro e le righe.
Vi posto il codice HTML e CSS.
codice:
#pagina {
width:450px;
height:519px;
margin:0px auto; /*Centra*/
background-image:url(img/background.png);
background-repeat:repeat;
}
#barralta {
display:inline;
float:left;
width:450px;
height:61px;
background-image:url(img/barra_alta.png);
background-repeat:repeat;
}
.logo {
display:inline;
float:left;
width:40px;
height:40px;
margin-right:397px;
margin-left:11px;
margin-top:10px;
}
.nomeprogramma {
display:inline;
float:left;
text-align:left;
margin-left:66px;
margin-top:10px;
}
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="pagina">
	<div id="barralta">
    	[img]img/icona.png[/img]
        <p class="nomeprogramma">NomeProgramma</p>
        <div style="clear:both"></div>
    </div>
</div>
</body>
</html>
Come posso risolvere??Ho provato in 10000 modi ma continua a non funzionare