Padding, layout a colonne...

[ricman]

Faccio un layout del genere:

<div id="main">
  <div id="contenuti">
     <div id="sx">SX</div>
     <div id="centro">Centro</div>
     <div id="dx">DX</div>
  </div>
</div>

E poi pongo

#main {
  margin: 0 auto;
  width: 90%;
  background-color: #fff;
  border: 1px solid #888;
}
#contenuti {
  background-color: #CCCC99;
}
#sx {
  float: left;
  width: 20%;
  background-color:#CC9999;
}
#centro {
  float: left;
  width: 60%;
  background-color:#FFCC99;
}
#dx {
  float: left;
  width: 20%;
  background-color:#99CC66;
}

E tutto va bene.
Però appena metto un padding di qualche pixel ad una delle tre colonne (esempio alla SX) il layout si distrugge!!
Allora, dico, a che serve lavorare in percentuale?
Mi trovo male a dare delle percentuali inferiori calcolando ogni volta i padding...

Voi come fate?

[Mich_]

Chiaramente stai lavorando su un browser standard, dato che IE si comporta in modo differente.

E pare che i CSS3 (quindi e` una cosa in prospettiva lontana) avranno una proprieta` che comprende tutta la larghezza/altezza, da poter definire al posto della larghezza/altezza interna.

Nel frattempo occorre lavorare con dei piccoli trucchi grafici.

Ma studiando il tuo codice, vedo che usi due blocchi uno esattamente interno all'altro (main e contenuti): chiaramente questo non serve: un blocco unico e` sufficiente.

Non conviene mai riempire tutta la larghezza: a seconda delle esigenze conviene fare in modo che la somma delle % sia tra 95 e 99. Lo spazio rimanente si puo` avanzarlo tutto da una parte, oppure tra i vari blocchi, studiando dei margini automatici opportuni (quelli del blocco centrale, oppure quelli dei blocchi laterali, o un misto).
Il gioco dei colori di sfondo puo` fare il resto, in modo che il tutto non si veda e sia gradevole.

Come dire: un po' di fantasia e un po' di esperienza fanno il miracolo.

[ricman]

Originariamente inviato da Mich_
Chiaramente stai lavorando su un browser standard, dato che IE si comporta in modo differente.

Uso FF, e poi cerco di far tornare le cose anche con IE.

Originariamente inviato da Mich_
Non conviene mai riempire tutta la larghezza: a seconda delle esigenze conviene fare in modo che la somma delle % sia tra 95 e 99. Lo spazio rimanente si puo` avanzarlo tutto da una parte, oppure tra i vari blocchi, studiando dei margini automatici opportuni (quelli del blocco centrale, oppure quelli dei blocchi laterali, o un misto).

Ahhhhhh.... Sagace...!
Ho capito...
Mi sa proprio che farò così...