Allineare 2 div

**atsap** · 26-07-2010, 11:44

Saluti!
Come al solito, il problema dell'allineamento.

Ho un div #container che contiene, appunto, altri div. Ho la necessità di piazzare alla destra di questo #container un altro div (#contRight) proprio come nell'immagine.

Questo è il codice che uso:

codice:

#container {

	float: left;
	min-height: 800px;
	width: 1000px;
	margin: auto;
	padding: 10px;
	background: white;
	border:#E9E9E9 solid 1px;
}

Come glielo piazzo il #contRight? Io uso questo codice:

codice:

#contRight {

margin-top: 100px;
float: left;
width: 100px;
min-height: 100px;
background: #FFFF00;
border: solid black 2px;

}

e dopo, ovviamente, un bel

codice:

 clear:both;

ma il problema è che ridimensionando la pagina, il #contRight mi va a finire "sotto" il dive #container. Ovviamente, i div devono essere centrati rispetto alla pagina.
Come posso fare?

Grazie!!!

**atsap** · 26-07-2010, 11:48

Dimenticavo l'immagine.

**ResianTaxidrive** · 26-07-2010, 12:37

ma ridimensionando la pagina in modo che sia più stretta della somma delle larghezze dei contenitori?

**atsap** · 26-07-2010, 12:43

Semplicemente quando ridimensiono la pagina, il div di destra se ne va "a capo". Credo di si, comunque, anche perché il div va "a capo" non appena il browser "lo tocca".

**ResianTaxidrive** · 26-07-2010, 12:58

credo che questo succeda con explorer, cmq prova a chiudere i due dentro un terzo contenitore più largo.

**fcaldera** · 26-07-2010, 13:13

qual è la larghezza dei due div da centrare?
va bene un doctype xhtml 1.0 strict?
il contenitore giallo ha un'altezza minima ?

**atsap** · 26-07-2010, 13:26

Resian... non saprei come fare.

fcaldera, sono già in xhtml 1.0 strict...
la larghezza del div #container (quello giallo) è 1000px, quella del #contRight è 150px.
Si, il #container ha una min-height di 800px...

**ResianTaxidrive** · 26-07-2010, 13:41

ho provato con ie8; ho provato con html strict in realta, non con xhtml. Cmq con solo i due div che hai, chiudendo la finestra del browser il secondo andava sotto; mettendo:

<div id="fuori">
<div id="container" ></div>
<div id="contRight"></div>
</div>

e mettendo

#fuori{
width:1300px;
}

e chiudendo la finestra, #contRight non andava sotto

**fcaldera** · 26-07-2010, 14:06

codice:

<body>
   <div id="wrapper">
      <div id="container">centro</div>
      <div id="contright">destra</div>
   </div>
</body>

CSS

codice:

body {
   text-align: center;
}

 #contright, #container {
  float: left;
  display: inline;
}

#contright { width: 150px; margin-top: 100px; }
#container { width: 1000px; height: auto !important; height:800px; min-height: 800px; }
#wrapper {
   width: 1150px;
   margin: 0 auto;
   text-align: left;
   height: auto;
   overflow : hidden;
}

**atsap** · 26-07-2010, 15:25

Brillante!

Grazie a tutti!

Discussione: Allineare 2 div

Strumenti discussione

Ricerca discussione

Visualizza

Allineare 2 div

Permessi di invio