position:relative e position:absolute non vanno d'accordo

**trust** · 27-07-2006, 10:24

Ciao ragazzi;

Ho un piccolo problema, guardate il sottostante codice:

codice:

<html>
<head>
<style type="text/css">
body{margin:0; padding:0;}
.principale{position:relative;width:527px; height:auto;left:0; top:0; background:#333333}
.primoriquadro{position:absolute; width:258px; height:auto; top:0; left:0; background:#FF00FF}
.secondoriquadro{position:absolute; width:258px; height:auto; left:0; top:0; margin-left:268px; background:#FF0000}
</style>
</head>
<body>

<div class="principale">
  <div class="primoriquadro">
  Questo è il primo riquadro
  </div>
  
  <div class="secondoriquadro">
  Questo è il secondo riquadro
  </div>
</div>

</body>
</html>

In pratica non riesco ad assegnare alla classe".principale" un altezza dinamica che cambi in
in proporzione all'altezza delle due classi"primoriquadro e secondoriquadro",
cioè se ad esempio la classe"primoriquadro" fosse alta "100px" la classe"principale"
non aumenta dinamicamente...
Come posso creare una condizione che mi permetta di fare quanto suddetto.

NB: ho usato le "position:absolute" per affiancare le due classi "primoriquadro e secondoriquadro", certo potevo
farlo anche con "position:relative mettendo la proprietà top:-200...", ma non posso farlo in quanto non conosco l'altezza delle due classi.

Grazie mille

**Mich_** · 27-07-2006, 10:40

Ovvero: come complicare una cosa semplice.
Ovvero: come studiare un modo per rendere necessario un CSS per ogni browser.

Un position: absolute; in molti browser fa togliere l'oggetto dal normale flusso. Quindi e` come se il contenitore non ci fosse.
Per affiancare due blocchi, basta usare il float. Ecoc il CSS che userei io, per il tuo HTML:

codice:

html, body {
  width: 100%;
  font-size: 100%;
  margin:0;
  padding:0;
}
.principale {
  width:527px; /* oppure 100% */
  background:#333;
  float: left;
}
.primoriquadro {
  width:258px; /* oppure 50% */
  background:#F0F;
  float: left;
}
.secondoriquadro {
  width:258px; /* oppure 49% */
  background:#F00;
  flaot: left; /* oppure right */
}

Potrebbe essere utile annullare margini, bordi e padding anche nei vari blocchi interni.

**trust** · 27-07-2006, 10:48

Ho provato il tuo codice su vari browser:

NETSCAPE: Non affianca i due div, ma li mette uno sotto l'altro

FIREFOX:Item a netscape

EXPLORER:Ottengo l'effetto desiderato

OPERA:Item explorer

Come posso fare per rendere il tuo codice compatibile con questi browser?

Grazie mille

**trust** · 27-07-2006, 11:04

**Mich_** · 27-07-2006, 11:29

Attenzione che ho inserito un errore di sintassi: flaot al posto di float.

Se lo avevi gia` corretto, posta il link alla pagina: ho l'impressione che ci siano altri errori.

**trust** · 27-07-2006, 11:39

no fortunatamente con ci sono altri errori...

l'unico era "flaot al posto di float."
Cmq già l'avevo corretto e l'avevo scritto nel precedente messaggio...
Scusami non so cosa abbia combinato nella pubblicazione del precedente per far uscire solo "

" !!! :master:

Cmq
GRAZIE MILLE PER LA DISPONIBILITA'

Discussione: position:relative e position:absolute non vanno d'accordo

Strumenti discussione

Ricerca discussione

Visualizza

position:relative e position:absolute non vanno d'accordo

Permessi di invio