Accedi per seguire   
Seguaci 0
spiug

[css] Come Allineare Due Contenitori

7 messaggi in questa discussione

Che modi conoscete per affiancare due contenitori DIV (con dentro del testo)??

Premetto che utilizzando l'attributo display:INLINE l'effetto non è quello voluto...vedi quà.

Si può usare l'attributo float, ma è complicato da usare e sconveniente perchè dà problemi di visualizzazione quando vinene utilizzato per contenitori figli di contenitori su cui è già stato usato.

E poi se il contenuto è abbondante e non viene fissato un witdh il secondo blocco se non ci stà cade inesorabilmente a capo (prova a restringere la pagina)....vedi quà.

Conoscete qualche altro trucco per allinearli?? :)

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Io in casi simili uso float e le percentuali, è buona norma inserire i due blocchi all'interno di un div, così prestano riferimento a quest'ultimo e non danno fastidio agli altri elementi della pagina. Bene o male lo scriverei così:

<html>
<head>
<style type="text/css" media="all">

* {
 margin: 0;
 padding: 0;
}

#bbb {
	float: left;
	width: 49%;
	padding: .2em;
}

#ccc {
	float: left;
	width: 49%;
	padding: .2em;
}

</style>
</head>
<body>

<div id="aaa">
<div id="bbb">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="ccc">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

</body>
</html>

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

p.s. a me il problema che descrivi non si presenta :)

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
p.s. a me il problema che descrivi non si presenta :)

Beh...comunque in ogni cosa quando si ha problemi di spazio questa soluzione non rende, in quanto manda tutto a capo sfalsando tutto :P

Prova a vedere quà infatti.

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Ti basta correggere le percentuali. Nell'esempio che ti ho postato ho incluso per ogni div un padding di 0.2em, giusto per dare un po' di aria al testo.

0.2em standard equivalgono a circa 3px per lato. Nel tuo esempio questo equivale a circa 18px in più in larghezza, se aggiungi un altro box devi contare altri 6px, 3 per ciascun lato. Per sistemare basta scrivere 48% per #ddd e #eee :)

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
Ti basta correggere le percentuali. Nell'esempio che ti ho postato ho incluso per ogni div un padding di 0.2em, giusto per dare un po' di aria al testo.

0.2em standard equivalgono a circa 3px per lato. Nel tuo esempio questo equivale a circa 18px in più in larghezza, se aggiungi un altro box devi contare altri 6px, 3 per ciascun lato. Per sistemare basta scrivere 48% per #ddd e #eee :P

Beh...è vero che le cose migliorano...ma il problema rimane quando lo spazio a disposizione comincia a mancare. :)

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Forse non ho capito molto bene il problema o cosa tu voglia fare nella pagina...anche io in questo casi uso il float e le percentuali, e non riscontro alcun problema...anche mettendo più di due blocchi.

:)

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Crea un account o accedi per lasciare un commento

Devi essere un utente registrato per partecipare

Crea un account

Iscriviti per un nuovo account nella nostra community. È facile!


Registra un nuovo account

Accedi

Sei già registrato? Accedi qui.


Accedi Ora
Accedi per seguire   
Seguaci 0