Newsgroup: it.comp.www.html
Titolo: float accostati

vorrei capire perché il seguente codice con due float non produce ( su
firefox) due oggetti accostati, ma mand a acapo il secondo.
se stringo le width di uno dei due, non riesco ad accostare i bordi.
<html>
 <head>
  <title>float accostati</title>
 </head>
 <body style="margin:0;text-align:center;">
  <div style="float:left;width:30%;border:solid thin blue;">1</div>
  <div style="float:right;width:70%;border:solid thin red;">2</div>
 </body>
</html>
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 se stringo le width di uno dei due, non riesco ad accostare i bordi.
Probabilmente la loro dimensione supera la larghezza della pagina.
Metti un selettore * con margin e padding a 0.
Il non riuscire ad accostare i bordi significa che se stringi le width 
riesci a metterli sulla stessa riga ma i margin e padding orizzontali 
non sono a zero.


   style="float:right;width:70%;border:solid thin red;">2</div>
Perche` il border si va a sommare alla width, quindi anche se e` di un 
pixel per lato, qui ti trovi un totale di 4 pixel piu` della larghezza 
dello schermo.
Finche` non avremo CSS3 conviene fare i layout usando solo div senza 
margin, padding e border. All'interno potrai piazzare altri elementi con 
queste tre caratteristiche, ma per ora azzerale.
Io ti consiglio anche di non arrivare mai al 100% preciso di width, 
perche` a volte gli arrotondamenti ci mettono lo zampino.
Usa 30% e 69.95%
Bye.



grazie.
alla fine mi sono arreso e ho risolto cosě:
<html>
<head>
<title>float accostati</title>
</head>
<body style="text-align:center;margin:10 4;">
<div style="float:left;width:30%;">
 <div style="width:100%;border:solid thin blue">1</div>
</div>
<div style="float:right;width:70%;"><!--ridimensiona bene anche cosě,
almeno in questo esempio elementare-->
 <div style="width:100%;border:solid thin red">2</div>
</div>
</body>
</html>
ma mi piace poco, perché usa troppi trucchetti poco intuitivi, per un
effetto cosě elementare.


 effetto cosě elementare.
Sinceramente le due spiegazioni/soluzioni che ti son state date mi 
sembrano molto migliori di questo accrocchio (senza offesa, eh! :)
Ciao,
Paolo



grazie, senza offesa :)
ma mi sapresti spiegare meglio?
sono talmente convinto di avere seguito i suggerimenti di Pellizzari,
che mi stupisco del tuo richiamo: i div principali, infatti, sono dei
float senza margin, padding o border.
ho messo i bordi agli oggetti interni che in pratica si dimensionano
da soli.
come avrei dovuto fare, invece?


 come avrei dovuto fare, invece?
L'uso di un doppio div č inutile e ridondante: hai un div che ne 
contiene un altro, solo per impostargli la larghezza ignorando i bordi.
Avresti potuto usare un unico div, riducendo la sua larghezza in 
funzione dello spessore del bordo (esattamente come scritto da Alessandro).
Ciao,
Paolo



cosě?
<div style="float:left;width:30%;border:solid thin blue">
 1
</div>
<div style="float:right;width:69.65%;border:solid thin red">
 2
</div>
perň una cosa cosě funziona solo se il browser č aperto a pieno
schermo e scatta appena ridimensiono la canvas.
probabilmente il browser calcola la larghezza della pagina in
percentuale e il bordo in pixel, ricadendo nel problema iniziale.
sul fatto che il mio accrocchio sia brutto non ho dubbi, ma č per
quella ragione che non ho trovato di meglio.


 quella ragione che non ho trovato di meglio.
Il problema è che i div hanno dimensione variabile (x%) mentre il border 
è fisso (thin), con il risultato che rilevi.
Secondo me, se non hai controindicazioni particolari, ti conviene usare 
il metodo più "diffuso", ossia rendere tutto fisso: includi tutti i div 
in un div principale, di larghezza fissa (da valutare in funzione delle 
tue esigenze) con margin:auto in modo che stia al centro della pagina.
In questo modo se la risoluzione è minore di una certa soglia compare la 
barra di scorrimento orizzontale, se è maggiore ai lati si vedrà dello 
spazio vuoto.
Ciao,
Paolo



rabbia.
Dio ha inventato il teorema di Talete, per insegnarci ad usare le
percentuali.
adesso arriva il css e ritorniamo tutti ai riferimenti assoluti.
(non rispondermi che il border è quantistico, se no Einstein si gira
nella tomba).
tra la soluzione che dici tu e quella che ho proposto io all'inizio,
preferisco la seconda.
immagino però che, appena la pagina aumenta nel numero degli elementi,
la complessità superflua si paghi.
con il tempo mi farò esperienza e mi creerò uno stile. speriamo che,
come dite voi, il css3 porti del nuovo su questi aspetti.
:)


 :)
Non farci troppo affidamento: sicuramente molte cose verranno sistemate, 
ma ci vorrà ancora tempo, poi altro tempo ci vorrà perché i browser si 
adeguino... si parla di anni.
Ciao,
Paolo
