div affiancati orizzontalmente

[Nick.ferro]

Ciao.
ho un div 'principale' che contien 3 div.. ho la necessità di avere i 3 div sulla stessa riga e allo stesso tempo avere il div principale con la dimensione di un unico div..

Questo è un problema che non riesco a risolvere nemeno con i float...

[paul_rnr]

Ciao,
teoricamente con il css, usando la position:absolute, puoi impostare la posizione esatta di un div, però se posti la una porzione di codice d'esempio si può capire meglio il tuo problema.

[Nick.ferro]

<div style='float:left'>SINISTRA</div>
<div id='generale' style = 'width: 300px; overflow:hidden'>
<div style='width: 200px;float:left'>1</div>
<div style='width: 200px;float:left'>2</div>
<div style='width: 200px;float:left'>3</div>
</div>

<div style='float:left'>DESTRA</div>




io vorrei che i 3 div figli del div generale stiano sulla stessa riga e che venga visualizzato solo il primo e metà secondo

[paul_rnr]

Non ho proprio ben capito di cosa hai bisogno esattamente, però forse questo ti può aiutare:


<div style="background-color: #0f0; position: absolute; widht:300px; height:100 px;">
<div style="background-color: #00f; position:absolute; width: 100px; height: 100px;">
</div>
<div style="background-color: #f0f; position:absolute; width: 100px; height: 100px; left: 100px;">
</div>
<div style="background-color: #f00; position:absolute; width: 100px; height: 100px; left: 200px;">
</div>
</div>


Sono 3 div affiancati l'uno all'altro, all'interno di un div madre.
css:
background-color, lo puoi ovviamente togliere, l'ho messo per rendere i div visibili senza contenuti.
position: absolute, posiziona il div facendo coincidere l'angolo in alto a destra con l'angolo in alto a destra del div madre, sovrapponendosi ad elementi già esistenti in tale posizione.
left: xxxpx, serve per spostare il div a destra di tot px.
Per ottenere risultati soddisfacenti, è opportuno indicare le dimensioni esatte di ogni div con width(larghezza) e height(altezza).
spero di aver capito il tuo problema.

[Nick.ferro]

Non c'è soluzione senza position absolute?

[paul_rnr]

lo si può fare con position: relative


<div style="background-color: #0f0; position: relative; width: 300px; height: 100px;">
<div style="background-color: #00f; position:relative; width: 100px; height: 100px;">
</div>
<div style="background-color: #f0f; position:relative; width: 100px; height: 100px; left: 100px; top: -100px;">
</div>
<div style="background-color: #f00; position:relative; width: 100px; height: 100px; left: 200px; top: -200px;">
</div>
</div>


P.S.il codice di prima aveva qualche errore, la prima righa va scritta così:
<div style="background-color: #0f0; position: absolute; width: 300px; height: 100px;">

P.P.S.
Se non vuoi usare la position del tutto, per quanto ne so io non credo si possa fare.
Però io mi interesso al codice solo da pochi mesi.
beh ma cmq credo che su www.w3schools.com troverai tutto quello che esiste sul codice html

[Nick.ferro]

Che differenza c'è tra absolute e relative?

[paul_rnr]

con absolute ti posiziona l'elemento nell'angolo in alto a destra dell'elemento che lo contienesenza tener conto di eventuali elementi fratelli contenuti nella stessa madre:
Se nell'angolo in alto a destra c'è già un'elemento, i 2 si sovrappongono, puoi regolare l'ordine degli elementi con il tag z-index che simula l'asse z.


con relative la differenza è che il posizionamento tiene conto anche degli altri elementi e quindi non permette che si sovrappongano.