div centrato e div alla sua destra

**-AA-** · 12-01-2012, 19:16

Non riesco a venircene fuori...
ho bisogno di avere un dive centrato alla pagina, per cui margin

auto, e affiancare 1 div alla sua destra (come immagine allegata)

Il problema è nel piazzare a destra il secondo div, perchè se metto un div in margin:0 auto non lo posso + portare in float:left ....

codice:

<div style="width:816px; margin:0 auto;">



</div>

<div style="width:290px; height:590px; background-color:#00FF00; float:left;">



</div>

**pr0web** · 12-01-2012, 22:31

Non sò se ho capito il tuo problema...
Sicuramente no, visto che la mia risposta mi sembra troppo squalita cmq:

codice:

<div style="width:1000px; margin:auto;"> 
    <div style="width:700px; height:590px; background-color:red; float:left;">
 
 
 
     </div>  
     <div style="margin: 0 0 0 10px; width:290px; height:200px; background-color:blue; float:left;"> 
 
 
 
     </div> 
</div>

Oppure invece di div ci metti nel body:

codice:

  <body style="margin:auto; width:1000px;">

**-AA-** · 13-01-2012, 08:58

Ciao pr0web
grazie per l'interesse ma non è la soluzione di quel che sto facendo.

il primo DIV non deve avere la regola di FLOAT perchè il primo DIV deve rimanere CENTRATO, il secondo DIV gli si deve affiancare a destra...

Per cui...
non è l'insieme dei due DIV che devono centrarsi
ma il primo div a centro pagina e il secondo alla sua destra
-------------------
Se guardi la soluzione che mi hai passato, risulta l'insieme dei due DIV centrati alla pagina, a me serve che il DIV rosso sia centrato nella pagina mentre quello blu alla sua destra.

**-AA-** · 13-01-2012, 09:02

immagine d'esempio

**Mich_** · 13-01-2012, 09:41

Visto che le dimensioni dei due blocchi sono fisse, la cosa si puo` risolvere facilmente con i posizionamenti assoluti:

codice:

HTML:
<div id="contenitore"> 
  <div id="centrato">
     
     
     
  </div>  
  <div id="affianc"> 
     
     
     
  </div> 
</div>

CSS:
#contenitore {
  position: relative;   /* necessario per poter dare absolute a quelli interni */
  width: 1000px;     /* si puo` usare anche 100%, pureche` il blocco esterno abbia width definita */
  margin:auto;
}
#centrato {
  position: absolute;
  width: 700px;
  height: 590px;
  background-color: red;
  left: 50%;
  margin-left: -350px;   /* la meta` di width */
  top: 0;
#affiancato {
  position: absolute;
  width:290px;
  height:200px;
  background-color:blue;
  left: 50%;
  margin-left: 350px;    /* oppure 360 se vuoi aggiungere i 10px di spazio */
}

**-AA-** · 13-01-2012, 09:54

Mich_
.....direi....ottimo!
era proprio quello che cercavo

GRAZIE!!!

**-AA-** · 13-01-2012, 10:46

Ekkime, la soluzione è quella giusta Mich_ ...solo...
come posso adattare l'altezza di #contenitore in base al suo contenuto?

**Mich_** · 13-01-2012, 11:44

basta che non definisci l'altezza

**-AA-** · 13-01-2012, 11:50

uhmm no ho provato a me non funzia

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
#contenitore {
  position: relative;   /* necessario per poter dare absolute a quelli interni */
  width: 100%;     /* si puo` usare anche 100%, pureche` il blocco esterno abbia width definita */
  margin:auto;
  background-color:#ccc;
}
#centrato {
  position: absolute;
  width: 700px;
  height: 590px;
  background-color: red;
  left: 50%;
  margin-left: -350px;   /* la meta` di width */
  top: 0;
 }
#affiancato {
  position: absolute;
  width:290px;
  height:200px;
  background-color:#00CC00;
  left: 50%;
  margin-left: 350px;    /* oppure 360 se vuoi aggiungere i 10px di spazio */
}
</style>
</head>
<body>
<div id="contenitore">


  <div id="centrato">
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
     
  </div>  
  <div id="affiancato"> 
22222222222222222222222222222222



  </div> 



</div>
</body>
</html>

**Mich_** · 13-01-2012, 12:06

Anzitutto la width:100% nel tuo caso non ha significato, perche` e` il 100% di una quantita` non definita.
Devi aggiungere al CSS:

codice:

html, body {
  width: 100%;
}

Poi spero che non stia provando in IE, perche` con quella DTD IE si comporta in modo retrocompatibile (quirks mode) e interpreta a modo suo: per far funzionare anche in IE, occorre avere una DTD Strict.

Poi devi dire cosa non funziona:
- la centratura (vedi sopra)
- l'altezza automatica (con quel codice dovrebbe funzionare: io non ho info per cui non dovrebbe funzionare)

Discussione: div centrato e div alla sua destra

Strumenti discussione

Ricerca discussione

Visualizza

div centrato e div alla sua destra

Permessi di invio