CSS: centrato, fluido a sinistra, fisso a destra, layout ordinato dalla sorgente con larghezza min/max

Question

I titoli lo dicono. Voglio un layout CSS 2-colonna che:

• è centrato - il contenuto principale è centrata sulla pagina
• ha un (pixel) fisso a destra della larghezza delle colonne
• ha una colonna di fluido di sinistra - consuma tutto lo spazio disponibile meno la larghezza della colonna destra
• è fonte ordinato - il contenuto colonna di sinistra viene prima il contenuto colonna di destra nel codice HTML
• consente una larghezza minima - 760px nel mio esempio
• consente una larghezza massima - 10 24px nel mio esempio

Se la finestra è maggiore della larghezza massima, il contenuto sarà centrato sulla pagina al valore massimo. Se la finestra è più piccola della larghezza massima, il contenuto riempie il 100% della pagina, a meno che non sia più piccola della larghezza minima che farebbe apparire la barra di scorrimento orizzontale.

Sono disposto a utilizzare alcuni javascript minore per gestire la larghezza min/max per i browser che non supportano tali proprietà (sto guardando a voi IE6), ma sono altrettanto disposti a lasciare che una parte del layout degradare.

È semplice da sostituire con le tabelle. Ho esaminato letteralmente centinaia di layout di esempio e nulla può fare tutte le cose che sto chiedendo, anche se ce ne sono diverse che si avvicinano. Il problema sembra essere quello di ottenere una colonna sinistra fluida e l'ordinamento sorgente nello stesso stile. Ho trovato diversi esempi di un diritto fisso sinistro/fluido (opposto di quello che voglio) con un ordine sorgente appropriato, o fluido lasciato/fisso a destra senza l'ordinamento sorgente, ma non entrambi.

Non mi interessa se utilizza float o margini negativi, ma vorrei evitare il posizionamento assoluto.

+---------------------------------------+ 
|          | 
| +---------------------------+-----+ | 
| |fluid      |fixed| | 
| |       |  | | 
| |       |  | | 
| +---------------------------+-----+ | 
|          | 
+---------------------------------------+ 

Answer 1

Consiglio vivamente di controllare il CSS templates at Dynamic Drive. Il quinto in basso dovrebbe essere quello che stai cercando (Fluid-Fixed). Basta aggiungere un max-width e min-width all'elemento contenitore principale e si dovrebbe essere tutto impostato.

FYI, questi sono davvero buoni modelli da utilizzare come base per i layout di pagina. Giocare con i CSS è un ottimo modo per imparare molto sui float e sul posizionamento, e mi ha davvero aiutato nei miei primi giorni di sviluppo web.

Answer 2

Stai cercando qualcosa di simile? (Negativo margini + galleggianti + ordine corretto sorgente + fissata destra)

http://blog.html.it/layoutgala/LayoutGala23.html

Più in layout pagina indice: http://blog.html.it/layoutgala/

E poi basta aggiungere larghezza min/max al contenitore.

Answer 3

Il mio tentativo: http://www.ryankinal.com/fluid/

Non ha del tutto funziona, anche se questo è solo perché a piccolissime dimensioni delle finestre, i miei margini negativi possono causare il contenuto a cadere fuori dalla pagina.Ecco la teoria:

1. contenitore ad una certa percentuale
2. colonna di sinistra al 100% del contenitore, e galleggiava lasciato
3. colonna di destra avvolto in 0 width%, float-destra avvolgitore
4. colonna a destra fissa larghezza (200px nell'esempio)
5. colonna di sinistra e di colonna sinistra margini destro della metà della larghezza della colonna di destra (100px nell'esempio)

Quindi, più grande è la colonna destra, più è probabile che il contenuto cada. Ma è così vicino come sono arrivato in una buona ora o giù di lì. È anche un po 'hacker a causa del fatto di avvolgere la colonna destra in un div estraneo e di trarre vantaggio dall'overflow: visibile.

Ma loro sono i miei duchi (per ora).