Newsgroup: it.comp.www.html
Titolo: Allineare DIV con CSS

Ho voluto mettere alla prova le mie (tenui) nozioni sui CSS e mi sono
assegnato un problemino:
"Tracciare un blocco contenente due blocchi uguali affiancati,
distanziati tra loro quanto dal bordo del blocco genitore. Utilizzare
misure percentuali."
Qualcosa del genere:
_______________________
|         ____             ____            |
|        |         |            |         |           |
|        |____|            |____|          |
|                                                     |
---------------------------------------
Non sono riuscito a combinare nulla.
Suggerimenti?
Grazie
	Augusto



Augusto Cagnani ha scritto:
| Ho voluto mettere alla prova le mie (tenui) nozioni sui CSS e mi sono
| assegnato un problemino:
| "Tracciare un blocco contenente due blocchi uguali affiancati,
| distanziati tra loro quanto dal bordo del blocco genitore. Utilizzare
| misure percentuali."
|
| Qualcosa del genere:
_______________________
|         ____             ____       |
|        |        |            |        |      |
|        |____|            |____|      |
|                                             |
| ------------------------------
| Non sono riuscito a combinare nulla.
| Suggerimenti?
Ciao Augusto,
    non so quale possa essere la sua applicazione pratica
ma è un bell' esercizio di stile. Per non toglierti il gusto
ti passo un link e qualche imbeccata.
Il link: 
www.brainjar.com
Gli hint. Puoi farlo in due modi:
- con il float, tenendo conto però che il float va contenuto:
http://www.complexspiral.com/publications/containing-floats/
- oppure con il posizionamento assoluto (cosa che preferisco)
In entrambi i casi devi tener conto del fatto che i due div
figli hanno accesso alle dimensioni del padre (dovrai però
assegnare quantomeno un' altezza al padre!) e che puoi
lavorare sui margini in percentuale.
Ciao e buon divertimento,
    SantaKlauss

ti passo un link e qualche imbeccata.
Ottimo!
Ho impiegato un poco a capire come il browser (o forse è una
peculiarità di Explorer) interpreta "left : tot%" della seconda DIV ma
funziona!
Grazie mille
	Augusto
ps: trascrivo il codice 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<title>Scatole</title>
<style type="text/css">
/* Stili generici per l'elemento body */
body {
	background : #F0FFFF;
	color : #000000;
	margin : 0px auto;
	overflow : none;
	width : 100%;
	height : 100%;
}
/* Stili per la scatola-contenitore*/
#grande {
margin : 10px auto;
border : 5px green solid;
width : 70%;
height : 50%;
}
#piccola1 {
background : #AAF0FF;
position : relative;
top : 0%;
left : 16%;
width : 26%;
height : 100%;
float : left;
}
#piccola2 {
background : #AAF0FF;
position : relative;
top : 0%;
/* per avere la spaziatura uguale occorre... raddoppiare! */
left : 32%;
width : 26%;
height : 100%;
float :left;
}
</style>
</head>
<body>
	<div id="grande">
		<div id="piccola1">
			piccola1
		</div>
		<div id="piccola2">
			piccola2
		</div>
	</div>
</body>
</html>

 Augusto
[...code cut...]
Ciao Augusto,
    il fatto è che combinare float e posizionamenti relativi non so quanto
sia lecito e si può ottenere lo stesso effetto con float+margini che è
molto meglio. Il pasticcio che hai avuto con i posizionamenti relativi
è dovuto a quello credo. Molto più semplicemente puoi fare così:
il box di sx lo dichiari float: left; margin-left: 20%;
quello di dx lo dichiari: float: right; margin-right: 20%;
Il codice che hai postato non va nè su ie5.5 nè su Opera.
Questo è la soluzione alternativa, e direi minimale, con i
posizionamenti assoluti.
Ciao,
    SantaKlauss *<|:-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head>
<title>Boxes</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<style type="text/css">
html,body{height:100%; margin:0; padding:0}
div#bigbox{position:absolute; top:25%; left:25%;
    height:50%; width:50%; border:1px solid #000}
div#leftbox, div#rightbox{position:absolute; top:33%;
    width:20%; height:33%; background-color:#000}
div#leftbox{left:20%}
div#rightbox{right:20%}
</style>
</head>
<body>
<div id="bigbox">
    <div id="leftbox"></div>
    <div id="rightbox"></div>
</div>
</body>
</html>

...
Il tuo codice mi ha risolto il problema! 
Avevo tentato con il posizionamento "absolute" ma non avevo ottenuto
nulla (purtroppo ho buttato via quelle prove e non ho idea
dell'errore).
Grazie
	Augusto