div annidati. problema in FireFox

[speriamobene]

tra gli altri, ho due div contenuti uno nell'altro:

<div id="corpo">
<div id="bodycontent">

..qui testo...

</div>
</div>


ho impostato nel css:

#corpo
{
background-color: #FFFFFF;
width: 100%;
padding-bottom: 30px;
margin:0px;
}

#bodycontent
{
float: right;
background: transparent;
position: relative;
width: 556px;
padding-top: 0px;
padding-left: 18px;
padding-right: 18px;
padding-bottom: 18px;
margin:0px;
}


in IE nessun problema, mentre in FF il testo contenuto in #bodycontent eccede tutti e due i div (anche corpo) e sfora sul resto della pagina. come fare per far 'allargare' i div in automatico?
ho provato a mettere height: auto; ma nn va...

[pierofix]

Un primo consiglio è di sintetizzare il codice agli elementi essenziali che concorrono a formare il problema: cosa ci interessa, ad esempio, che lo sfondo sia trasparente? Seconda cosa: usate i tag del forum! Quando scrivete del codice, marcatelo con il relativo tag CODE. Proviamo dunque a riassumere:

(X)HTML
<div id="corpo">
   <div id="bodycontent"> 
      
   </div> 
</div>

CSS
#corpo { 
   width:100%; 
   padding-bottom:30px; 
   margin:0; 
} 
#bodycontent { 
   float:right; 
   position:relative; 
   width:556px; 
   padding:0 18px 18px 18px;
   margin:0; 
}

La prima cosa che noto è che stai utilizzando due metodi di posizionamento in una volta sola, ovvero il floating e il positioning: questo, che io sappia, non si può fare.

Prova ad usarne solo uno e posta i risultati.

[speriamobene]

ok. grazie x i suggerimenti ho lasciato solo float. situazione non cambia.

[pierofix]

Prova a farci un disegnino del risultato che vuoi ottenere: forse stai solo sbagliando approccio.

[Mich_]

Il "corpo" e` piu` alto di 100%, infatti il padding e` oltre le dimensioni nel box-model del W3C, mentre e` all'interno delle dimensioni nel box-model di IE.

Discorso simile per il "bodycontent" nei cfr del "corpo".

[speriamobene]

ok ma come risolvo ora? nn posso mica mettere 100%-18px

[speriamobene]

stato del problema:

dati:
1 div #corpo contenente 1 div #bodycontent

problema:
imposto sfondo di corpo con immagine in basso a destra MA questa nn viene mostrata come in IE in basso a destra, anche se il testo di bodycontent è lungo ma ad una certa altezza...

quello che penso è che corpo debba avere una sua altezza ma nn capisco come farla a settarla 'dinamica'...

[webus]

posizionando float #bodycontent lo hai "tolto" dal naturale flusso del contenuto del documento.
Se ho ben capito cosa cerchi, ma non ho visto il resto della pagina, non ti serve nemmeno posizionarlo.

#corpo
{
background: url("immagine.jpg") white bottom left no-repeat fixed;
padding-bottom:30px;
margin:0;
}

#bodycontent
{
background: transparent;
width: 556px;
padding:0 18px 18px;
margin:0;
}

Ciao!