CSS fluid layout - πρόβλημα

[Zderg]

Καλησπέρα,

 

Προσπαθώ να κάνω το layout για ένα site που ετοιμάζω και δεν μπορώ να πετύχω αυτό που προσπαθώ. Στην παρακάτων εικόνα φαίνεται αυτό που θέλω να πετύχω. Το δεξι ακρο του σχηματος θεωρειται το τελος της οθονης. Το min-width:960px αναφερεται σε ενα div-wrapper που περιλαμβανει όλη την οθονη πλην του footer.

 

 

Το γκρί πλαίσιο θέλω να καταλαμβάνει το όλη την οθόνη προς τα δεξια αλλα να ειναι fluid (όπως και τα header και footer). Έχω το εξής πρόβλημα:

 

Αν βαλώ π.χ. width:80% για το γκρι πλαισιο τοτε είναι ΟΚ αλλα αν κανω resize τον browser τοτε γίνεται collapse κατω απο το αριστερό πλαίσιο. Απ'την αλλη, αν βαλω μικρότερο width τοτε δεν γινεται collapse κατα το resize αλλα οταν ειναι full screen δεν παει μεχρι τερμα δεξια της οθονης. Εγω θελω να μικραίνει μέχρι τα 960px συνολικου width οθονης και μετα να πρεπει να scrollαρω. Δεν θέλω να γίνεται collapse.

 

Nομιζω οτι σας μπερδευω ετσι οπως τα εγραψα ε; Ελπιζω να καταλαβατε τι προσπαθώ να κάνω..

 

Ευχαριστω.

[TheELF]

Αυτό που περιγράφεις γίνεται λογικά λόγου του float: left/right που θα έβαλες σε κάποια από τα div,που όταν δεν υπάρχει αρκετός χώρος για να τα δείξει τα πλαίσια το ένα δίπλα στο άλλο το κολλάει από κάτω.

Για να βάλεις το σωστό ποσοστό στο γκρι πρέπει να έχεις και το αριστερό πλαίσιο σε % όπως και τα «κενά» και να αφαιρέσεις αυτό το νούμερο από το σύνολο(100%),πρέπει να συν υπολογίσεις και τα borders και τα διάφορα άλλα που και αυτά χρειάζονται τον χώρο τους, π.χ. αν 20% το αριστερό πλαίσιο και 2% το κενό τότε μένουν 78% για το γκρι επειδή όμως και το border που βάζεις στο αριστερό παίρνει χώρο εκτός των 20% πρέπει να βάλεις μικρότερο νούμερο στο γκρι π.χ. 77% αν έχεις και άλλα border,στο γκρι ή στο κεντρικό div, πρέπει να τα υπολογίσεις και αυτά.

[defacer]

Τα πάντα εξαρτώνται από τις λεπτομέρειες (μήπως θέλεις το sidebar να φτάνει πάντα μέχρι το footer? μήπως μπορούμε να υποθέσουμε ότι το main content θα είναι πάντα πιο "ψηλό" από το sidebar?). Όσο περισσότερες απαιτήσεις έχεις, τόσο πιο "δύσκολο" είναι το layout (με την έννοια ότι χρειάζεσαι extra divs για να μπορέσεις να τα φτιάξεις όπως θέλεις).

 

Αν κατάλαβα καλά νομίζω ότι το πρώτο πρώτο layout από εδώ σου κάνει;

 

Το min-width έχε υπόψη ότι μπορείς να το βάλεις και κατευθείαν στο body, δε χρειάζεσαι έχτρα div μόνο γι' αυτό.

[Zderg]

@TheELF Το να τα βάλω ολα με % δεν με βολευει. Θέλω καποια πραγματα να εχουν fixed width.

 

@defacer Το sidebar δεν εχει σταθερο height. Το main δεν εχει παντα μεγαλυτερο υψος απο το sidebar και κανενα απο τα δυο δεν φτανει αναγκαστικα μεχρι το footer. Τώρα κοιταω αυτο που μου εδωσες στο link. Φαινεται να κανει. Αν εχω θέμα θα κάνω post.

 

Σας ευχαριστω!!

[Zderg]

@defacer Το template δεν μου κανει ακριβως. Θελω το footer να ειναι μονιμα στο κατω μερος της οθονης, ακομα και αν το περιεχομενο ειναι μικροτερο απο μια σελιδα. Αυτο το εχω καταφερει αλλα δεν γινεται να το ενσωματωσω στο template, κατι χαλαει.

 

Προσπαθησα μετα να ενσωματωσω στοιχεια του template στο δικο μου CSS αλλα ετσι μου χαλαει το fixed margin αναμεσα στο γκρι και στο sidebar.

 

Αρα θελω να εχω το footer μονιμα κατω (και να γινεται scroll down αν εχω μακρια σελιδα) και το margin αναμεσα στο γκρι και το sidebar να ειναι σταθερο.

 

Καμια λυση;