[css] due elementi nella stessa linea, help!!
espongo il dramma macchiavellico:
ho uno scheletro di 3 blocchi div [header per i fatti suoi e sotto 2 div, una colonna e un corpo]
dentro il blocco dell'header ho la necessità di inserire 2 elementi: 2 img e una stringa di testo che rispettivamente devono allinearsi le img a sinistra e il testo a destra e devono stare nella stessa linea dentro al div!!!
suggerimenti??
n.b. niente soluzioni con tabelle!! :wink:
ecco il codice di riferimento-->
Codice HTML:
<!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>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<style type="text/css">
<!--
body { margin: auto; padding: auto; background-color: #CCCC99 }
/* struttura layout */
#container { padding: 0px; margin: 20px 20px 20px 20px; text-align: center }
#header { padding: 0px; margin: auto; text-align: left; border: 2px solid violet; background-image: url(./sfondo.gif); background-repeat: repeat-x }
#sinistra { float: left; width: 200px; padding: 0px; text-align: center; border: 2px solid black }
#destra { margin-left: 220px; width: auto; padding: 0px; text-align: center; border: 2px solid black }
/* struttura layout */
/* nascondo la linea, sicchè comparirà solo in caso di mancato caricamento del css!! */
hr { display: none }
/* nascondo la linea, sicchè comparirà solo in caso di mancato caricamento del css!! */
.Pindex { padding: 10px; margin: auto; text-align: left }
-->
</style>
</head>
<body>
<div id="container">
<!-- header -->
<div id="header">
<img src="include/it.jpg" alt="italian version" style="border: 0px; width: 27px; height: 18px" /> <img src="include/uk.jpg" alt="english version" style="border: 0px; width: 27px; height: 18px" />
| TITOLO DEL SITO
</div>
<!-- header -->
<hr />
<!-- sinistra -->
<div id="sinistra">
sinistra
<p>prova</p><p>prova</p><p>prova</p><p>prova</p><p>prova</p><p>prova</p><p>prova</p><p>prova</p>
</div>
<!-- sinistra -->
<hr />
<!-- destra -->
<div id="destra">
<p class="Pindex">prova testo prova testo prova testo prova testo prova testo prova testo prova testo</p>
</div>
<!-- destra -->
</div>
</body>
</html>
