Salve a tutti e buona domenica, sto studiando da un po' di tempo la soluzione css per eliminare le tabella da un mio piccolo sito così stavo leggendo i vosti tutorial è ho messo giù due righe di codice per un piccolo css come scritto sopra. Qualcuno mi potrebbe aiutare a farmi capire cosa sbaglio ?
Il mio obbiettivo è questo.
ho un box contenitore,
al suo interno ho un altro box che conterrà un titolo generico la cui larghezza e lunghezza non sono fissi.
Sotto di esso ci andranno altri due box allineati uno di fianco all'altro che contengono una descrizione e un prezzo sulla destra.
Questa unità qui sopra dovrà ripetersi più volte sempre distanziandosi dalle altre voci.
Il mio problema è che il risultato è penoso sia con IE che con Firefox.
Posto il codice, sarei veramente grato a tutti quelli che mi spiegeranno dove sbaglio.
PS: il box titolo non ha dimensione fissa, e nemmeno il box risultante dall'affiancamento della descrizione e dal prezzo, però se la pagina diventava troppo piccola volevo fare in modo che il box prezzo si posizionasse sotto al box descrizione per questo ho messo float (volevo fare in modo di poterlo leggere da cellulare con opera7)
<CSS>
/* regole per il posizionamento dei blocchi */
body {
width : 100%;
font-size : 100%;
font-family : arial, helvetica, sans-serif;
background : white;
}
#contenitore{
width : 100%;
border : 0.1px;
border-color : #ffffff;
margin : 0.1em;
color : #000000;
}
#titolo {
float : left;
margin : 1px;
padding : 0.2em;
border : 0.5px solid;
border-color : #ffffff;
width : 100%;
background : green;
}
#testo {
display : inline;
margin : 1px;
padding : 0.2em;
float : left;
border : 0.5px solid;
border-color : #ffffff;
width : 80%;
background : red;
}
#prezzo {
margin : 1px;
display : inline;
padding : auto;
float : left;
border : 0.5px solid;
border-color : #ffffff;
width : 10%;
background : yellow;
}
div.clear {
clear: left;
height: 0;
overflow : hidden;
}
</CSS>
<PHP>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>testlayout</title>
<?php
// dichiarazione stile css usato
echo "<link rel=\"stylesheet\" href=\"test.css\" type=\"text/css\" />";
?>
</head>
<body>
<?php
print "<div id=\"contenitore\">";
print "<div id=\"titolo\">titolo";
print "</div>";
print "<div id=\"testo\">testo";
print "</div>";
print "<div id=\"prezzo\">prezzo€";
print "</div>";
print "</div>";
print "<div id=\"clear\"></div>";
print "<div id=\"contenitore\">";
print "<div id=\"titolo\">";
print "</div>";
print "<div id=\"testo\">testo";
print "</div>";
print "<div id=\"prezzo\">prezzo€";
print "</div>";
print "</div>";
print "<div id=\"clear\"></div>";
?>
</body>
</html>
</PHP>