Inserire un div con lunghezza automatica, tra il div di sinistra e il bordo dello schermo a destra

**AndreaBa** · 05-08-2016, 19:54

Salve a tutti! Questa è la mia prima discussione!

Ora vi spigo il mio problema:
All'interno di una pagina HTML ho inserito un div(a sinistra della pagina) nella quale ho inserito una immagine dentro ad una forma circolare(cerchio). Ora vorrei poter inserire alla destra di questo div un ulteriore div che però come lunghezza(width) abbia lo spazio restante della pagina. In poche parole il div di destra deve avere come lunghezza ciò che va' dal div di sinistra alla fine dello schermo a destra.
Div di sinistra:
height: 300px;
width: 300px;

Div di destra:
height: 300px;
width: è ciò che mi servirebbe sapere

Sono entrato da poco nel mondo dell'HTML e CSS, penso si veda

.
Spero di essermi spiegato bene e se qualcuno sa' come posso fare lo ringrazio in anticipo!

-Andrea

**KillerWorm** · 05-08-2016, 20:58

Ciao e benvenuto sul forum.

Puoi risolvere applicando, al div sinistro, la proprietà float:left (e specificando width) mentre, su quello destro, puoi semplicemente omettere width (che di default è auto).

In realtà, in questo modo, il div destro si estende per tutta la larghezza della pagina ma risulta posizionato sotto l'elemento col float. Comunque sia, il contenuto testuale si sposta comunque posizionandosi "attorno" a questo elemento. Se invece vuoi posizionare il div destro esattamente a partire subito dopo quello di sinistra, puoi applicare un margin-left pari alla larghezza di tale div.

Un esempio:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      #divsinistra{
                background: red;
                width: 300px;
                height: 300px;
                float: left;
            }
      #divdestra{
                background: silver;
                height: 300px;
                margin-left: 300px;
            }
    </style>
  </head>
  <body>
        <div id="divsinistra">Contenuto div sinistra</div>
        <div id="divdestra">Contenuto div destra</div>
  </body>
</html>

PS: se ti interessa approfondire lo studio dei css ti consiglio di dare uno sguardo ai link utili CSS (tra le discussioni in evidenza di questa sezione). Puoi trovare diversi riferimenti a guide e molto altro materiale interessante.

[MOD]
Quando posti codice sul forum è opportuno utilizzare gli appositi tag di formattazione (vedi in fondo al post sul regolamento di sezione tra le discussioni in evidenza). Grazie, buona permanenza sul forum.

**semplice77** · 05-08-2016, 21:01

A titolo esemplificativo puoi dare una lettura ai layout a due colonne

e prendere spunto da li.

**AndreaBa** · 05-08-2016, 21:45

Grazie mille a entrambi per le risposte.
L'esempio mi è stato molto utile per comprendere più velocemente.

Vi porgo un'ultima domanda:
Mettiamo che io abbia un div "padre" delle dimensioni(in larghezza) dello schermo nella quale ho altri 3 div più piccoli all'interno. E' possibile suddividere tutti e 3 i div a distanza uguale sulla stessa riga senza eseguire calcoli in modo da poterli successivamente adattare a monitor di diversa risoluzione ?
Grazie in anticipo e buona serata!

**semplice77** · 05-08-2016, 21:51

Guarda ai layout a tre colonne.
Non avrebbe senso se fosse in altezza.

**AndreaBa** · 05-08-2016, 22:20

Grazie per avermi suggerito questa idea!
Buona serata!

**SerenaGrafic@** · 08-08-2016, 10:13

Ciao AndreaBa, benvenuto

Se il div padre, indipendentemente dalla larghezza che ha, contiene 3 div al proprio interno, a ogni div puoi applicargli:

codice:

.figlio {
float:left;
width:33.3%;
}

Usare le misure in percentuale, in certi casi, è molto utile e ti permette di fare cose che con misure in px o in vh risulterebbe difficile.

Rimango a disposizione se hai altri dubbi.
Buona giornata!

Discussione: Inserire un div con lunghezza automatica, tra il div di sinistra e il bordo dello schermo a destra

Strumenti discussione

Ricerca discussione

Visualizza

Inserire un div con lunghezza automatica, tra il div di sinistra e il bordo dello schermo a destra

Tag per questa discussione

Permessi di invio