div allineati ma non solo...

**Ethan** · 11-01-2011, 17:56

Salve, ho la necessità di allineare due div di cui uno a larghezza fissa e l'altro tutto il resto della larghezza della pagina.
Per allinearli nessun problema. Il primo div è:

#menu{
float: left;
width: 250px;
}

ed il secondo:

#contenuto{
width: 100%;
float: left;
}

E' corretto

? il problema stà nel fatto che il secondo div si estende per tutta la larghezza della pagina e non per il resto (dimensione schermo - 250px) quindi compare la barra orizzontale

.

Sapete dirmi la soluzione? Come vedete non sono molto ferrato con i css

.

Grazie
Ethan

**sandrone65** · 11-01-2011, 20:41

Puoi fare così;

#menu{
float: left;
width: 250px;
}

#contenuto{
margin-left:250px;
}

**Ethan** · 12-01-2011, 01:26

Ciao, grazie per la risposta però non funziona

.
Infatti se non metto un width, di default se ne và in auto e non mi prende tutta la larghezza della pagina ma solo una parte (ovvero quanto necessita per contenere il contenuto del div).
Ho letto che per i div contenuti in un div contenitore la larghezza dipende dal div contenitore appunto,

quindi se il div contenitore è al 100% i due div all'interno per esempio saranno 50% e 50% oppure 70% e 30% (l'importante che il totale sia 100) e lo stesso vale se ragiono in termini di pixel.
Quindi penso che nel mio caso se metto il secondo div al 100% lo trovo esatto che sarà largo quanto la larghezza della pagina. Infatti la barra orizzontale si estende esattamente quanto la larghezza del primo div (ovvero di 250 px).

Quindi come posso risolvere questo prolema?

Grazie
Ethan

**sandrone65** · 12-01-2011, 01:39

Se non imposti la width, il tuo div si estenderà in larghezza per tutta la larghezza del suo contenitore.
Mi pare sia quello che desideri ottenere, no?
Prova a visualizzare questo codice (o stesso di prima, ma completo), vedrai il menu in rosso e il contenuto in verde esteso al 100% della pagina.
Se poi questi elementi nella tua pagina si trovano all'interno di altri elementi il discorso può cambiare, ma allora devi postare tutta la pagina, altrimenti capirsi diventa difficile

Ciao

<!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=utf-8" />
<title>test</title>
<style type="text/css">
#menu{
float: left;
width: 250px;
background:red;
}

#contenuto{
margin-left:250px;
background:green;
}
</style>
</head>
<body>
<div id="menu">Testo del menu</div>
<div id="contenuto">Testo del contenuto</div>
</body>
</html>

**Ethan** · 12-01-2011, 02:18

Sandrone sei un grande!!!

.... o io sono scemo...
Adesso funziona e dire che le avevo provate tutte le combinazioni con div annidati e non e poi era così semplice

Vabbè grazie ancora..

Ethan

Discussione: div allineati ma non solo...

Strumenti discussione

Ricerca discussione

Visualizza

div allineati ma non solo...

Permessi di invio