Riempire con 4 tag un div che è w:100%

**ricman** · 19-11-2009, 13:54

Situazione un po' particolare... in effetti sono rimasto spiazzato...

Ho un div che può stare ovunque... dentro un td, dentro un altro div... non mi pongo il problema.

Questo div ha width:100%

Questo div contiene, in questa sequenza, 4 tag:
A Input A Label

I due A hanno W e H fissi di 14x14px

I 4 tag devono stare in una riga sola senza andare a capo.

Gli altri due tag (input e label) devono essere elastici per riempire la larghezza del div che li contiene (mantendosi in riga). Non importa se quando riduco le dimensioni del div vedo "4 piccoli quadratini", l'importante è che restino allineati su un unica riga e che tutto lo spazio del div sia occupato.

Voi come fareste?

**Mich_** · 19-11-2009, 15:40

Voi come fareste?

Piccolo trucchetto (ma non so se e` applicabile nel tuo caso)

codice:

<fieldset id="contenitore">
  <fieldset class="invisibile">
    [img]...[/img]  
    <input ... />
  </fieldset>
  <fieldset class="invisibile">
    [img]...[/img]  
    <input ... />
  </fieldset>
</fieldset>

con CSS:

codice:

#contenitore {
  width: 100%;    /* questopresuppone che l'oggetto che lo contiene abbia larghezza definita */
}
#contenitore fieldset {
  width: 49.9%;
  float: left;
  ...
}
#contenitore img {
  width: 14px;
  height: 14px;
  float: left;
}
#contenitore input, #contenitore label {
  float; left;
}

**Shores** · 19-11-2009, 16:26

Mich_ , non sono daccordo con la tua proposta: con quel css si ottiene che i due fieldset siano grandi la metà dello spazio disponibile nella div contenitore, ma NON che la input e la label siano elastiche e occupino tutto il posto che rimane...

A mio avviso si potrebbe procedere così:

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=windows-1250">

        <meta name="generator" content="PSPad editor, [url]www.pspad.com[/url]">

        <title>

        </title>

        <style>

#esterno {

  width: 400px;

}

#contenitore {

  width: 100%;

}

#contenitore .mezzo {

  width: 49.9%;

  float: left;

}

#contenitore .quarto {

  padding-left:14px;

}

#contenitore img {

  width: 14px;

  height: 14px;

  float: left;

  margin-left:-14px;

}

#contenitore input, #contenitore label {

  width:100%;

}

        </style>

    </head>

    <body>

        <div id="esterno">

            <div id="contenitore">

                <div class="mezzo">

                    <div class="quarto">

                        [img]...[/img]

                        <input ... />

                    </div>

                </div>

                <div class="mezzo">

                    <div class="quarto">

                        [img]...[/img]

                        <input ... />

                    </div>

                </div>

            </div>

        </div>

    </body>

</html>

Ciau!

**Demetrioxxx** · 22-11-2009, 22:44

In questo modo, però, ogni browser lo visualizza in modo diverso...

**Shores** · 23-11-2009, 02:07

Se per browser intendi IE6 e IE7 , può anche darsi, ma IE6 ormai si può davvero cominciare a scordarselo, nemmeno M$ lo supporta più, e forse in IE7 tutto si sistema se si attiva la doctype switch per la modalità standard compliant, mentre negli altri browser dovrebbe funzionare bene...

A quali browser ti riferisci?

Discussione: Riempire con 4 tag un div che è w:100%

Strumenti discussione

Ricerca discussione

Visualizza

Riempire con 4 tag un div che è w:100%

Permessi di invio