testo che dovrebbe scendere

[giananto]

Allora altro problema...

se io inserisco del testo all'interno di un di contenuto in un altro div e a sua volta contente in un altro:

div contenuto
---div menu
---div testoimg
------div testo
------div img
---div footer


io andro ad inserire il testo nel div testo, solo che se ne inserisco tanto non mi va ad allungare il div contenuto....inserisco il codice css e quello html cosi vi rendete conto di quello che ho fatto...

codice html

<div id="contenuto">
<div id="controlli">
<li class="bottone"> HOME
<li class="bottone"> CHI SIAMO
<li class="bottone"> PRODOTTI
<li class="bottone"> STAMPA
<li class="bottone"> CONTATTI
</div>
<div id="testoimg">
<div id="testo">
<h1>Benvenuti a tutti sul sito</h1>
<p class="normale">qui vado ad inserire il testo</p>
</div>
<div id="img">ciao ciao
</div>
</div>
<div id="footer">
<li class="footer">Copyright 2007 M-Shirt Sito realizzato in css da Giancarlo Pilla
</div>



codice css

#bloccone {
width: 100%;
height: 100%;
}
#container{
border-style:solid;
border-color:black;
border-width:1px;
width:42em;
margin-left:auto;
margin-right:auto;
}
#header{
background-color:#B11B26;
background-image:url(header.gif);
background-repeat:no-repeat;
height:200px;
}
#header li{
display:inline;
}
#contenuto{
background-color:#f5f5f5;
width:auto;
height:auto;
}
#controlli{
background-color:#CCCCCC;
height:2em;
width:100%;
border-top-color:black;
border-top-width:1px;
border-top-style:dotted;
border-bottom-color:black;
border-bottom-width:1px;
border-bottom-style:dotted;
}
#testoimg{
background-color:#f5f5f5;
clear:both;
height:auto;
}
#testo{
background-color:#f5f5f5;
width:55%;
height:auto;
margin-top:1em;
margin-bottom:1em;
margin-left:1em;
float:left;
text-align:left;
}
#img{
background-color:black;
width:45%;
height:auto;
margin-top:1em;
margin-right:1em;
margin-bottom:1em;
float:right;
text-align:center;
}
#footer{
background-color:#CCCCCC;
height:auto;
width:100%;
text-align:center;
padding-left:auto;
padding-right:auto;
border-top-color:black;
border-top-width:1px;
border-top-style:dotted;
}

[Action Slip!!!]

una soluzione potrebbe essere l'inserimento del footer all'interno del div testoimg ed inserire nel codice del footer il clear:both.
Non sono una cima nei css però un altro consilgio è quello di non usare un identificatore con nome testo ma ad esempio:

<div id="contenuto">
<div id="controlli">
codice menù
</div>

<div id="corpo">
<div id="parte sinistra">
<h1>Benvenuti a tutti sul sito</h1>
<p class="testo">testo</p>
<p class="testo">testo</p>
</div>
<div id="parte destra">
<p class="testo"></p>
</div>
<div id="footer">
codice
</div>

</div>
</div>

ti consiglio di inserire commenti html per avere la struttura più omprensibile tipo:

ecc...

[H5N1_Aviaria]

L'adattamento di un BOX al suo contenuto si perde in alcune situazioni e viene garantito da altre:

se il BOX ha position: absolute
se il BOX ha impostato il float
se il BOX è contenuto in un BOX la cui altezza è definita

ed altre diavolerie che sono Browser dipendenti.
Non tutti i Browser, difatti, utilizzano lo stesso BOX Model (non mi stancherò mai di dirlo)

Prova, difatti a togliere il float e... magia!!!!