Due colonne dentro un riquadro

[xshell]

Buongiorno.

Qualcuno mi potrebbe gentilmente aiutare a sistemare le colonne del mio sito?

Io utilizzo XHTML e CSS. Il mio sito dovrebbe avere una lunghezza complessiva di 1000 pixels ed essere centrato (ho quindi creato un <div> principale e con il CSS l'ho centrato e gli ho impostato la lunghezza). A questo punto vorrei creare un riquadro secondario sempre di 1000 pixels, interno al <div> principale, che abbia due bordi, ognuno di 1 pixel, colorati diversamente. Per far ciò ho annidato due <div> ognuno con border: 1px solid #colore. Dentro questo riquadro secondario, vorrei inserire due colonne: una a sinistra e una a destra (di differente lunghezza), che non fuoriescano però dal riquadro secondario (nel caso il testo in esse contenuto diventasse troppo lungo). E proprio qui sorge il problema: anche queste due colonne dovrebbero avere un doppio bordo (quindi con due <div>), ma quando imposto float: left per accostare le colonne, se una colonna è troppo lunga, fuoriesce dal riquadro. Se invece tolgo il float, le due colonne non sono più accostate.

RICAPITOLANDO: Come faccio a mantenere le due colonne accostaste, mantenendole però dentro al riquadro in cui stanno e in modo che l'altezza del riquadro si adatti alla lunghezza delle due colonne? (Io le ho provate tutte... con float, con position, con left, top...)

Spero di essermi spiegato bene, anche se il discorso è abbastanza contorto.

[Kreatore]

allora ci sono diversi problemi sopratutto di compatibilità tra i diversi browser.

ragioniamo sul caso più semplice e con i browser che leggono correttamente i css.

Crei un div, gli annidi all'interno le due colonne (non ho capito il discorso del bordo, ma se è solo per ottenere un differente colore di bordo assegni due colori diversi) assegni ad ogni colonna un float differente e chiudi il tutto con una riga nascosta a con la quale cancelli i float:

<div id="principale">
<div class="left"></div>
<div class="right"></div>
<hr />
</div>

il codice css potrebbe essere

body{text-align:center;margin:30px;}
#principale{margin:0 auto;width:70%;}
.left{float:left; border-left:1px solid #ccc;border-right:1px solid #000}
.left{float:right; border-right:1px solid #ccc;border-left:1px solid #000}
hr{visibility:hidden;clear:both;}

Va bene cosi?

[xshell]

Grazie per la disponibilità.

Non sapevo che si potesse annullare il float con un <hr />. Il problema però rimane... forse perché lo schema del sito sta cominciando ad essere caotico (e dire che avevo cominciato con l'intento di renderlo ordinato al massimo)... Per il bordo, intendevo creare un bordo di 2 pixel, ma costituito da due linee da 1px di colore diverso (e ciò credo si possa fare solo con due div annidate).

Io posto il file con l'html e il css... ti sarei veramente grato se riuscissi a risolvere il problemino:

Scarica il file "schemaprova.zip"

[xshell]

Ok, credo di aver risolto il problema con quel <hr />. Grazie mille.

[Kreatore]

guarda che non è l'hr a 'cancellare' i float.
é il comando css assegnatogli: clear:both;

[xshell]

Originariamente inviato da Kreatore
guarda che non è l'hr a 'cancellare' i float.
é il comando css assegnatogli: clear:both;

Si, l'ho capito dopo. Infatti poiché <hr /> anche se nascosto lascia un certo margine, ho preferito usare un div con clear: both;

Grazie per avermi fatto capire che i float devono essere terminati altrimenti possono strabordare.