evitare sovrapposizione div

**keccoblu** · 02-03-2005, 17:34

Salve a tutti.
Ho questo codice:
HTML:
<body>
<div id="cont">
<div id="sin"></div>
<div id="des"></div>
</div>
</body>

CSS:
html, body {margin:0px;padding:0px;}
#cont {
text-align: center;
width: 80%; height:120px;
background-color: orange;
}
#sin {
float: left;
margin: 0px; padding: 0px;
width: 250px; height: 80px;
background-color: gray;
}
#des {
float: right;
margin: 0px; padding: 0px;
width: 250px; height: 80px;
background-color: gray;
}

Ridimensionando la pagina il div di destra("des") si infila sotto quello di sinistra("sin"). Come posso evitare questo? Con firefox ed opera mi pare si possa risolvere utilizzando minwidth, o qualcosa del genere, mentre con ie non c'è verso.
Conoscete un qualche trucchetto?
Non c'è ad esempio un qualche parametro per il div "cont" che impedisca che il suo contenuto vada a capo?
Grazie a tutti

**floyd46** · 02-03-2005, 17:38

Succede quando hai un contenitore in % ed all'interno dei box con larghezza in px.
Ti converrebbe portare tutto in px o %. Se nn ricordo male ieri o avanti ieri è stata fatta una discussione del genere.
Prova a cercare tra i post aperti.
ciao

**keccoblu** · 02-03-2005, 17:44

Si, infatti questo l'avevo già notato. Però vorrei che i div interni non si ridimensionassero, pur avendo la width in percentuale.
Come posso fare?
tenchiù

**ptransidico** · 03-03-2005, 15:25

CSS:
html, body {margin:0px;padding:0px;}
#cont {
text-align: center;
width: 80%; height:120px;
background-color: orange;
}
#sin {
float: left;
margin: 0px; padding: 0px;
width: 250px; height: 80px;
background-color: gray;
}
#des {
margin-left: 250px; padding: 0px;
height: 80px;
background-color: gray;
}

**keccoblu** · 03-03-2005, 20:14

Ok grazie, ma io non voglio essere vincolato ai pixel. Vorrei semplicemente che il div di destra restasse sempre ancorato a destra. Vorrei inoltre che restringendo la pagina i due div non si sovrapponessero, ma questo con ie non è possibile.
Con firefox, opera e compagnia bella invece basta impostare il min-width.

**boboli** · 03-03-2005, 21:40

scusa ma cosa metti in mezzo tra sinistra e destra ???
se hai un contenitore 80% e le due colonne fanno un bel 500px in due (250+250) presumo tu debba avere un contenitore centrale che occupi quello che resta tra 80%-500px (ad esempio se fosse 1024 si parlerebbe di 320px)
quindi se tu in mezzo ci metti

#centro {
margin:0px 250px 0px 250px;
}

dovresti avere una fascia centrale che si allarga con la risoluzione dello schermo...
o forse non ho capito na mazza

**keccoblu** · 04-03-2005, 10:36

Ok, ho aggiunto il div che dicevi tu ... ma l'hai provato?!?! E' un macello !!

<body>
<div id="cont">
<div id="sin"></div>
<div id="centro"></div>
<div id="des"></div>
</div>
</body>

html, body {margin:0px;padding:0px;}
#cont {
text-align: center;
width: 100%; height:120px;
background-color: orange;
}
#sin {
float: left;
margin: 0px; padding: 0px;
width: 250px; height: 80px;
background-color: gray;
}
#centro {
margin:0px 250px 0px 250px;
}
#des {
margin-left: 250px; padding: 0px;
height: 80px;
background-color: gray;
}

**boboli** · 04-03-2005, 11:13

kekko riesci a fare un'immagine con photoshop (o simili) e la spiegazione dettagliata di come dovrebbe comportarsi la pagina...sono al lavoro e non posso fare prove quindi vado molto a mano libera

Discussione: evitare sovrapposizione div

Strumenti discussione

Ricerca discussione

Visualizza

evitare sovrapposizione div

Re: evitare sovrapposizione div

Permessi di invio