2 div affiancati con larghezza variabile

**AltF4** · 11-12-2014, 23:42

Ciao a tutti, dovrei affiancare 2 div, ma non posso impostare la loro larghezza a priori in quanto risulta variabile.

Il div a sinistra contiene un titolo (di lunghezza variabile) e quello a destra contiene uno sfondo che si ripete in base alla sua larghezza, di conseguenza anche questo è variablie.

Ho provato con float:left e float:right, ma dovrebbero funzionare solo se utilizzati con larghezze pre impostate.

Esiste una soluzione?

**Mich_** · 12-12-2014, 13:31

IL float funziona anche con larghezze variabili, ma se la somma delle larghezze supera il contenitore, il secondo elemento (in ordine di apparizione nell'HTML) viene spostato sotto.

Forse pero` (se interpreto bene quanto non scritto) potresti fare un unico blocco, largo 100%, in cui inserisci il titolo a sinistra e lo sfondo partendo da destra:

codice:

HTML:
<body>
  <div id="titolo">
    <h1>Il tuo titolo</h1>
  </div>
....
</body>

CSS:
html, body {
  width: 100%;     /* altrimenti il 100% del #titolo perde significato */
}
#titolo {
  width: 100%;
  background: url(...path/nomeFile...) no-repeat right top;
}
#titolo h1 {
  ...
}

**AltF4** · 12-12-2014, 14:26

Originariamente inviata da Mich_

IL float funziona anche con larghezze variabili, ma se la somma delle larghezze supera il contenitore, il secondo elemento (in ordine di apparizione nell'HTML) viene spostato sotto.

Forse pero` (se interpreto bene quanto non scritto) potresti fare un unico blocco, largo 100%, in cui inserisci il titolo a sinistra e lo sfondo partendo da destra:

codice:

HTML:
<body>
  <div id="titolo">
    <h1>Il tuo titolo</h1>
  </div>
....
</body>

CSS:
html, body {
  width: 100%;     /* altrimenti il 100% del #titolo perde significato */
}
#titolo {
  width: 100%;
  background: url(...path/nomeFile...) no-repeat right top;
}
#titolo h1 {
  ...
}

Ti ringrazio per la risposta, ma così facendo lo sfondo compare anche sotto il titolo stesso, in pratica si tratta di una linea che dovrebbe iniziare 30/40px dopo il titolo e continuare per tutta la larghezza, più o meno così:

Titolo pagina --------------- (fino alla fine)

**ac_socmel** · 12-12-2014, 15:43

il titolo del 3d è fuorviante
se è un titolo devi usare gli Hx
quindi

codice:

<h1><span>titolo</span></h1>

così puoi usare colori per coprire lo sfondo

**AltF4** · 12-12-2014, 19:20

Originariamente inviata da ac_socmel

il titolo del 3d è fuorviante
se è un titolo devi usare gli Hx
quindi

codice:

<h1><span>titolo</span></h1>

così puoi usare colori per coprire lo sfondo

In realtà il titolo non è del tutto fuorviante, io avevo la necessità di affiancare 2 div, dove in quello a sinistra c'è una scritta (che funzioni da titolo non conta molto) e nell'altro c'è uno sfondo che si ripete (che ci sia una linea conta poco anche questo).

Comunque ho provato anche ad utilizzare h1, ma il risultato è lo stesso.

**ac_socmel** · 12-12-2014, 22:45

http://jsfiddle.net/acsocmel/tpnuezt0/

**AltF4** · 15-12-2014, 12:45

Originariamente inviata da ac_socmel

http://jsfiddle.net/acsocmel/tpnuezt0/

Grande! Ti ringrazio!

Per chi dovesse avere lo stesso problema:

codice:

.uno {
    border: 10px solid red;
    float: left
}
.due {
    border: 10px solid blue;
    overflow: hidden
}

Grazie a ac_socmel!!!

Discussione: 2 div affiancati con larghezza variabile

Strumenti discussione

Ricerca discussione

Visualizza

2 div affiancati con larghezza variabile

Permessi di invio