Ciao.
Sto impazzendo !!
Dunque, dovrei realizzare un layout con due colonne in cui il lato destro è fisso a 300px e il sinistro quello che rimane a seconda della risoluzione dello schermo.
Ho creato un DIV con width a 100% in cui ho inglobato le due colonne (altri due div) con quello di destra flottato right, width fisso a 300px .. e quello di sinistra come lo posso fare ?
Grazie a tutti.
Innanzitutto abolisci i div contenitori (sono semanticamente errati e non servono a niente, si possono sempre evitare con una corretta implementazione CSS).
Ecco il codice che ti serve:
codice:<div id="colsx">aa</div> <div id="coldx">bb</div>codice:body { margin : 0; } #colsx { margin : 0 300px 0 0; background-color : yellow; } #coldx { width : 300px; background-color : red; position : absolute; top : 0; right : 0; }
Grazie Sgro.
Purtroppo però mi succede questo (premetto che sto testando su un portatile con risoluzione 1024x768 .. ma immagino che il risultato sia lo stesso su altre res)
IE: Il div di sx occupa tutta la pagina, quello di destra è sotto allineato a dx
FF & SA: il div di sx ha sfondo e bordo nella posizione corretta ma il testo è nei 300px di sx, il blocco di destra sotto allineato a dx
L'uso di posizionamenti (assoluti o relativi) da` sempre problemi nell'adattere il layout a varie risoluzioni.
Conviene usare invece i float.
Nel caso specifico io farei:con CSS:codice:<body> <div id="later"> ... </div> <div id="princ"> ... </div> </body>Se devi dare sfondi diversi o una divisione in due della pagina, puoi usare il trucco delle "false colonne" ("faux columns") (chiaramente allineando l'immagine a destra).codice:html, body { font-size: 100.01%; width: 100%; /* necessario per molti browser - non per IE */ } #later { width: 300px; float: right; } #princ { margn-right: 300px; }
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
Io credo invece che il problema sia nelle modifiche che hai fatto, sicuramente, al codice che ti ho postato, in quanto così come te l'ho messo io è testato su FF, IE6 e 7 e funziona perfettamente.
Parli di "bordo" ad esempio. Se hai aggiunto un px di bordo a entrambi i lati del div a sinistra, devi togliere 2px dal margine destro. Ovviamente non so che modifiche hai fatto, sto solo provando a intuirle. Se mi posti il codice modificato che hai usato ti riesco a indicare dove sbagli e perchè hai quei difetti di posizionamento.
Per mich: i posizionamenti assoluti danno sì problemi, ma non se usati in maniera corretta. La tecnica che ho postato è una semplificazione del layout fluido a 3 colonne spiegato sul sito del W3C, e li da loro non credo che se ne sbattano della compatibilità cross-browser e simili, non credi?
Ciao
Grazie anche a Mich_.
Siete bravissimi tutti e due
Entrambi i metodi mi danno lo stesso risultato che vi dicevo prima
Come ti ho scritto, devono essere le modifiche che fai, o altri valori css che vanno a sovrapporsi a creare il problema. Ti invito nuovamente a postare il codice che usi (sia html che css) per poter individuare il problema.
Permessi di invio
Rispondi quotando