Div con larghezza fissa in linea "liquida"

[nebbia]

Magari la domanda sembreerà banale ai più esperti , ma non riesco proprio a realizzare quello che vorrei .

Ho un div ( container con width 100% ) che contiene dei div al cui interno sono delle iconcine di 225x150 ( sia i div che le icone ).

Vorrei che questi div si allineassero l' uno accanto all' altro fino a che ce ne stanno nel div container ( e fin qui , ok... ), e siccome dipende dalla risoluzione , vorrei che fossero centrati .

Mi spiego meglio : a risoluzione width 1440 ce ne stanno 6 .
225 x 6 = 1350 , quindi vorrei che il container tenesse presente questo e si centrasse lasciando 1440 -1350= 90 : 2 = 45 pixel a destra e 45 a sinistra.

Oppure:
width 1200 ( ce ne stanno 5 )
225 x 5 = 1125 ; 1200-1125 = 75:2 = 37.5
38 pixel a destra e 37 a sinistra ..

il tutto ovviamente in automatico , in modo da avere un layout che si adatti alle varie risoluzioni , ma sempre centrato .

Non ci riesco .. come devo fare ?


stralcio del css :

...

#container {
width:100%;
}

.div_icona {
width:225px;
height:150px;
margin:3px;
float:left;
}

...



grazie

[Mich_]

Prova a togliere width dal container, e metterci invece:
margin: 0 auto;

Pero` controlla di avere anche:
html, body {
width: 100%;
}
(che dovrebbe gia` esserci, invero).


Nelle prove metti anche colori di sfondo diversi nel body e nel container, altrimenti diventa piu` difficile capire cosa succede.

[nebbia]

Ciao Mich_ e grazie !

l' ho fatto , ma purtroppo non funziona ..

situazione attuale :

stralcio css:

...

body,html {
width:100%;
margin:0;
padding:0
}

#container {
margin:0 auto;
}

.div_icona {
width:225px;
height:150px;
margin:3px;
float:left;
}

...

purtroppo niente da fare .. i div si mettono in linea , ma si appoggia a sinistra e lascia molto spazio a destra ....

mah ?!


ciao e grazie

[sandrone65]

Impostare margin:auto centra un div soltanto se se ne specifica la larghezza altrimenti, essendo il div un elemento block-level, si estenderà per tutta la larghezza del suo contenitore. E quindi, in questo caso, i div_icona con float:left appariranno sempre e comunque allineati a sinistra.
Per centrare un elemento dalla larghezza non definita è possibile dichiararlo display:inline ed impostare text-align:center al suo contenitore.
A quel punto rimane il problema di attribuire le corrette dimensioni agli elementi inline, e lo si può fare impostando il padding sia degli elementi stessi che del contenitore.
Una cosa del genere:

body,html {width:100%;margin:0;padding: 0;}
#container {text-align:center;
padding:150px 0px 0px 0px;
}
.div_icona {
padding:130px 0px 0px 225px;
display:inline;
margin:3px;
}

<div id="container">
<div class="div_icona"></div>
<div class="div_icona"></div>
<div class="div_icona"></div>
<div class="div_icona"></div>
<div class="div_icona"></div>
</div>

[nebbia]

Grazie Sandro !!!!!!!

Non solo perchè hai risposto , ma anche perchè hai spiegato perfettamente il problema ed hai tentato di farmi capire . E' davvero un bellissimo gesto , il condividere le proprie conoscenze con altri. Grazie .

A dire il vero però , a me non funzionava neanche come mi hai spiegato tu.

Alla fine ho risolto con l' inline-table, così :

html {
width:100%;
margin:0;
padding:0;
}

body{
width:100%;
background: #fff;
padding:0;
margin:0;
}

#container{
z-index:10;
text-align:center;
border:1px solid black;
}


.icon {
width:225px;
height:150px;
background-color:#F00;
margin:3px;
display:inline-table;
}


<div id="container">
<div class="div_icona"></div>
<div class="div_icona"></div>
<div class="div_icona"></div>
<div class="div_icona"></div>
<div class="div_icona"></div>
</div>



E' comunque corretto ??


Grazie infinite per le tue spiegazioni .

ps: c'è un però ....
in alcuni di quei div ci sono delle immagini ( icone) e fin qui tutto bene, in altri adesso dovrei metterci del testo e purtroppo le caselle col testo invece si scompongono ..

come mai ?

thanks !

[sandrone65]

Eh, allora è un bel problema, ad un elemento inline non si possono in realtà attribuire dimensioni, quindi se ci metti dentro del testo ne alteri le dimensioni magari ricavate tramite un padding. Finchè c'è solo lo sfondo può ancora andare bene.... A questo punto devi tornare ad usare i float, che però ti si allineeranno sempre a sinistra, a meno che non li infili dentro un contenitore dalle dimensioni fisse con margin:auto, e quindi torniamo esattamente al punto di partenza...

Una volta mi era capitata una roba del genere e avevo risolto calcolandomi con php (cioè lato server) la lunghezza di un DIV che doveva contenere un numero imprecisato di elementi (la cui lunghezza unitaria mi era nota) da centrare. Moltiplicavo tale valore per il numero di elementi e nell'head impostavo la regola di style... non so se puoi risolvere in questo modo...

[nebbia]

Grazie mille Sandro , gentilissimo !!

in effetti avevo pensato ad un intervento o php o javascript ...

L' alternativa ( e credo farò così ) è invece del testo , mettere un immagine contenente del testo... penso sia la cosa più veloce e pratica ...

grazie tantissimo per i tuoi interventi che mi hanno davvero insegnato qualcosa ..


Thanx


nebbia