Problema box

[Sonikag]

Ho 3 box:

Box1: contiene il tutto e ha sfondo bianco
Box2: deve essere lungo 100%, sfondo rosa e testo allineato a sx
Box3: deve essere lungo quanto il contenuto, deve essere allineato a destra, colore fuxia

Ho fatto così:

<div class="box1"> 
<div class="box2">
scritta a sx
<div class="box3">
scritta a dx
</div>
</div>
</div>

.box1{
	background-color: #FFFFFF;
	border: 1px dotted #95458A;
	width: 90%;
	padding: 4px;
	margin: 4px;
	font-size: 0.8em;
}
.box2{
	padding: 3px;
	margin: 2px;
	font-size: 1.1em;
	color: #FFFFFF;
	background-color: #CC96BE;
	text-align: right;
	float: right;
}
.box3{
	font-family: "Trebuchet MS",Verdana,Arial,Sans-serif;
	padding: 3px;
	margin: 2px;
	font-size: 0.9em;
	color: #AE71A5;
	background-color: #FFE6F1;
	text-align: left;
}

il problema è che box3 finisce a destra come vorrei, ma sotto box2 e non dentro.

[Mich_]

Le caratteristiche del CSS non rispettano le richieste.

Non devi mettere float nel box2, ma mettere float:right; nel box3.

Il box2 deve avere height: 100% (se lo vuoi alto come tutto il box1)

Poi varrebbe la pena inserire il box3 dentro il box2 prima del testo di box2.

Nel box2 non devi mettere text-align: right, se vuoi l'allineamento a sinistra. (eventualmente devi inserire un hack per IE, se non capisce il float)

[Sonikag]

sono riucita a sistemare grazie
Adesso però mi hanno stravolto le cose...
box1 continua ad essere il contenitore di box2 e box3 però box2 non deve più contenere box3. Le posizioni rimangono le stesse.

  <div class="box1">
          <div class="box2">ssss</div>
          <div class="box3">ddddd</div>  
</div>

Per farli stare affiancati non so quale sia il modo corretto, devo definire una larghezza? cambia la sequenza in cui li inserisco?
E fin che ci sono pongo una domanda [OT]... in quei due box ci saranno dei link, è corretto NON metterli tra

</p> in quanto non sono paragrafi giusto?
FINE OT.

Sonia

[Mich_]

Allora box2 dovra` avere:
float: left;
width: 58%; /* ad eseempio */

Invece box3 (quello a destra):
float: left; /* oppure right, a tuo piacimento
width: 38%; /* ad eseempio */

Importante e` considerare che la larghezza totale (100%) e` data da:
margin2+border2+padding2+width2+padding2+border2+m argin2 + margin3+border3+padding3+width3+padding3+border3+m argin3

Se metti un altro blocco a tutta larghezza sotto gli altri, deve avere il clear.

I tag <a> devono stare dentro un tag che contiene del testo, quindi non metterli dentro un tag

(oppure[*] o altro) e` un errore (se parliamo di XHTML Strict o superiore).

[Sonikag]

Grazie mitch.

la domanda 1 è: se box 2 per esempio è 58 e box3 è 38 quel 4% di scarto lo hai lasciato per i margini?

(Devi sistemare alcune imperfezioni ma funziona )

[Mich_]

Originariamente inviato da Sonikag
la domanda 1 è: se box 2 per esempio è 58 e box3 è 38 quel 4% di scarto lo hai lasciato per i margini?

Esatto. Per margini, bordi e padding.
Ho visto che li metti a valori finiti (non zero e neppure quasi trascurabili), per cui ho pensato di lasciare quel 4%.
Potrebbe andar bene anche un valore diverso, devi fare un po' di prove.
Ma testa anche con una finestra un po' piccola (attorno a 700 px) e piuttosto grande (sopra i 1000 - 1200 px)