Convivenza dimensione px e %

**KillerWorm** · 10-03-2014, 00:44

Ciao, sei sulla buona strada ma devi correggere il tiro. Assegnando width:100% ad un div significa che questo andrà ad assumere la stessa larghezza del suo contenitore. Ovviamente non può funzionare perché non resterebbe spazio disponibile per gli altri due div laterali.

Puoi fare così.
Sul div centrale lascia il valore di default per width (cioè "auto", quindi puoi omettere la regola) e non assegnare il float. Gli altri due vanno bene come li hai impostati (riguardo float e width) ma assicurati che il div centrale sia "scritto" dopo questi due, in modo che sia "letta" correttamente la larghezza restante.

Esempio:

codice:

<div style="float:left;width:50px;background:#eee;">Sx, width 50px</div>
<div style="float:right;width:50px;background:#eee;">Dx, width 50px</div>
<div style="background:#f5f5f5;">Centro, larghezza libera (width:auto)</div>

**ac_socmel** · 10-03-2014, 13:15

Originariamente inviata da KillerWorm

assicurati che il div centrale sia "scritto" dopo questi due, in modo che sia "letta" correttamente la larghezza restante.

non è proprio vero perchè il div senza float andrà a occupare tutto lo spazio disponibile
basta togliere lo sfondo colorato ai div flottanti per rendersene conto
è il contenuto del div che ubbidendo allo stacking order "sgomita" e si adatta allo spazio disponibile lasciato dagli elementi flottanti

lo so che sono contorto e poco chiaro

comunque concludendo per adattare il layout e creare le tre colonne( che suppongo sia l'obbiettivo reale) al div "centrale" si può dare una margin pari o superiore alla larghezza del/dei div flottato/i
oppure un overflow
il valor di overflow dipende dalla compatibilità
quello più compatibile mi risulta "hidden" anche se questo potrebbe poi creare altre questioni

**KillerWorm** · 10-03-2014, 23:54

Originariamente inviata da ac_socmel

non è proprio vero perchè il div senza float andrà a occupare tutto lo spazio disponibile
basta togliere lo sfondo colorato ai div flottanti per rendersene conto
è il contenuto del div che ubbidendo allo stacking order "sgomita" e si adatta allo spazio disponibile lasciato dagli elementi flottanti

Chiaro ac_socmel. Capisco la tua puntualizzazione e il tuo suggerimento she ne segue.

Capisco inoltre che la tua puntualizzazione non era riferita al fatto che il div centrale debba essere posto dopo la scrittura dei due laterali fluttuanti. Quindi, anche aggiungendo un margin, resta valido quanto ho precisato:

assicurati che il div centrale sia "scritto" dopo questi due, in modo che sia "letta" correttamente la larghezza restante.

Posto un esempio pratico secondo le tue indicazioni:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8"/>
  </head>
  <body>
    <div style="float:left;width:50px;">Sx, width 50px</div>
    <div style="float:right;width:50px;">Dx, width 50px</div>
    <div style="background:#f5f5f5;margin:0 50px;">Centro, larghezza libera (width:auto)</div>
  </body>
</html>

**Al_katraz984** · 11-03-2014, 01:07

Originariamente inviata da KillerWorm

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8"/>
  </head>
  <body>
    <div style="float:left;width:50px;">Sx, width 50px</div>
    <div style="float:right;width:50px;">Dx, width 50px</div>
    <div style="background:#f5f5f5;margin:0 50px;">Centro, larghezza libera</div>
  </body>
</html>

l'accendiamo!

Discussione: Convivenza dimensione px e %

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio