Div che va a capo

**GianniPinotto** · 25-06-2010, 21:19

Ciao a tutti.
Ho un problema che non riesco a risolvere e mi fa diventare matto.
Allora, ho un div contenitore, con all'interno 2 altri div. Tutti i div hanno dimensioni fisse.
Ho creato un html e il relativo css per esplicare il problema

l'html:

codice:

<html>
<head>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="contenuti">

<div class="box1"></div>
<div class="box2"></div>

</div>

</body>
</html>

e il css collegato:

codice:

.contenuti {

margin-top: 10px;
margin-left: 20px;
width: 590px;
height: 450px;
overflow: hidden;
border: 1px solid #FF33CC;
float: left;
}

.box1 {

float:left;
height: 400px;
width: 400px;
border: 1px solid #FF33CC;

}

.box2 {

float:left;
height: 400px;
width: 190px;
border: 1px solid #FF33CC;

}

Se i 2 box non superano la grandezza massima in orizzontale del box contenitore (quindi 590px), tutto si vede perfettamente, cioè i due box interni allineati "sulla stessa riga".
Ma nel momento in cui i 2 box sono più grandi, il secondo box, finisce sotto al primo.

Ho già provato ad inserire un div al di sotto che abbia le proprietà "clear: both" e "width: 100%" come suggerito in alcuni forum, provato ad utilizzare proprietà inline ecc. ma non riesco a farli stare "sulla stessa riga". Il risultato che vorrei è, che anche se i box o il loro contenuto fosse in eccesso rispetto al box contenitore, il tutto sbordasse a destra, piuttosto che il secondo box finisca sotto al primo, cosa che non voglio assolutamente.
Spero che abbiate capito il mio problema

.

Vi ringrazio in anticipo per le risposte, ciao e buona serata.

p.s. allego un'immagine da esempio.

**carlogh** · 25-06-2010, 21:26

essendo le dimensioni fisse, sia in larghezza che in altezza, per ovviare al problema potresti posizionarli in modo assoluto. In quel modo sei certo che stiano fermi.
Altrimenti, dando ai due div interni overflow: auto ti compaiono le barre di scorrimento ma non si muovono di lì. Oppure con overflow: hidden il contenuto eccedente non viene visualizzato, ma i div rimangono al loro posto.
Fai qualche prova di questo tipo

**GianniPinotto** · 25-06-2010, 21:35

Ciao e grazie per la veloce risposta.
Allora, impostando la proprietà absolute in position, sia a tutti e due, che a solo uno dei due, i div si posizionano nell'angolo in alto a sinistra (uno sopra l'altro) e non uno di fianco all'altro come vorrei.
Provato giocando con l'overflow, ma il risultato non cambia...

**carlogh** · 25-06-2010, 21:41

oltre a position: absolute, gli devi dare anche le "coordinate".

codice:

.box1 {
   position: absolute;
   top: 0;
   left: 0;
   border: 1px solid #FF33CC;
   height: 400px;
   width: 400px;
}

.box2 {
   position: absolute;
   top: 0;
   left: 401px;
   border: 1px solid #FF33CC;
   height: 400px;
   width: 190px;
}

calibra le due regole top e left per distanziarli meglio a tuo piacimento.

**GianniPinotto** · 25-06-2010, 22:37

Ho provato e ti ringrazio, funziona bene.
Ciao

**carlogh** · 25-06-2010, 22:50

bene

Discussione: Div che va a capo

Strumenti discussione

Ricerca discussione

Visualizza

Div che va a capo

Permessi di invio