Fluid width 3 column design - Quick n dirty style

Αν και προσωπικά είμαι φαν των static width site, είναι φορές που μπορεί να ζητηθεί από τον πελάτη να κόψετε ένα site έτσι ώστε να πιάνει το πλήρες πλάτος της σελίδας.

Αν θέλετε να πάτε σε ποσοστά, τότε μπορείτε πολύ εύκολα να χρησιμοποιήσετε το holy grail 3 column layout όπου σας δίνονται οι, δοκιμασμένα, σωστές αναλογίες των στηλών σε ποσοστά έτσι ώστε να μην έχετε προβλήματα σε οποιαδήποτε ανάλυση και browser.

Αν, όμως, σας ζητηθεί να έχουν σταθερό πλάτος οι στήλες και να στρετσάρει η κεντρική περιοχή? Εκεί ίσως να αντιμετωπίσετε πρόβλημα, εγώ σίγουρα είχα δυσκολευτεί μέχρι να βρω τη λύση.

Η λύση η οποία είναι αρκετά απλή αλλά με ένα μικρό κόστος στη σειρά που εμφανίζεται το περιεχόμενό σας στο DOM ακολουθεί παρακάτω.

Παίρνοντας τη σχεδίαση ένα προς ένα βήμα έχουμε τα εξής:

1. Ένα container div το οποίο θα περιέχει όλο το site μας και θα πιάνει το 100% της σελίδας (#container)
2. Μία στήλη στα αριστερά με στατικό πλάτος, πχ 200px, floated στα αριστερά. (#left-column).
3. Την κεντρική περιοχή που θα "στρετσάρει" (#main-area).
4. Και τη δεξιά στήλη με στατικό πλάτος 200px και float:right (#right-column).

Αμέσως έχουμε το εξής markup:

<style type="text/css">
#left-column{
float:left;
width:200px;
}
#right-column{
float:right;
width:200px;
}
</style>
<div id="container">
<div id="left-column">&nbsp;</div>
<div id="main-area">&nbsp;</div>
<div id="right-column">&nbsp;</div>
</div>

 Το οποίο όμως μας εμφανίζει ένα πρόβλημα, η κεντρική περιοχή "κάθεται" πάνω από τη δεξιά στήλη:

Θα περίμενε κανείς πως τα floated elements θα κάθονταν αριστερά και δεξιά της κεντρικής περιοχής, όπως γίνεται στις περιπτώσεις όπου έχουμε απλά δυάδες floated-non floated element.

Ή μήπως κάνουμε λάθος?

Ως Δυτικός λαός έχουμε συνηθίσει να χρησιμοποιούμε πάντα λύσεις αριστερά->δεξιά (όπως ο τρόπος που διαβάζουμε, δηλαδή) κάτι που στις περισσότερες των περιπτώσεων σημαίνει αριστερή στήλη+κεντρική περιοχή στη σχεδίαση ενός site, με αποτέλεσμα να χρησιμοποιούμε σπάνια right floated elements (ακόμα κι αν έχουμε δεξιές στήλες, τις περισσότερες φορές αυτές κάθονται ως left floated σε ένα άλλο floated element με σταθερό πλάτος).

Επομένως, δε μου κάνει έκπληξη που ούτε το σκέφτηκα αλλά ούτε και βρήκα πολλές απαντήσεις στο δυτικό διαδίκτυο γιατί η html λειτουργεί ιεραρχικά (το αυτονόητο δηλαδή) ακόμα και στις περιπτώσεις των right floated στοιχείων, κάτι που σημαίνει πως αν έχω μία σειρά από 3 div, όλα τους floated right, θα ξεκινήσει το stacking από το πρώτο προς το τελευταίο δίνοντάς μου μία εικόνα 3->2->1 και όχι 1->2->3 όπως λανθασμένα θα περίμενα.
Εξήγηση σε περίπτωση που μπερδευτήκατε: Κάνοντας parse την html ο browser μας πρώτα βλέπει το div#1 και επομένως το πετάει στα δεξιά. Μετά, το div#2 το βάζει κι αυτό δεξιά "μετά" το πρώτο δηλαδή στα αριστερά του, σαν να στοιβάζει κιβώτια. Μετά το ίδιο για το div#3 κοκ.

Επιστρέφουμε, λοιπόν, στο θέμα μας και στο πώς θα λύσουμε το πρόβλημά μας.

Η λύση είναι απλή: μεταφέρουμε τη δεξιά στήλη πριν από την κεντρική περιοχή μας, έτσι ώστε να "κάτσει" αυτή στα δεξιά πριν από το κεντρικό div.

Ο κωδικάς μας τώρα είναι σωστός:

<style type=text/css">
#left-column{
float:left;
width:200px;
}
#right-column{
float:right;
width:200px;
}
</style>
<div id="container">
<div id="left-column">&nbsp;</div>
<div id="right-column">&nbsp;</div>
<div id="main-area">&nbsp;</div>
</div>

Αμέσως, βέβαια, εγείρεται το ερώτημα αν αυτή η λύση είναι σωστή semantically καθώς επιλέγουμε να βάλουμε πιο ψηλά περιεχόμενο το οποίο δεν πρέπει να βρίσκεται εκεί. Η αλήθεια είναι πως όντως, κάνουμε τη ζαβολιά μας με αυτήν την τεχνική, αλλά δε γίνεται αλλιώς, για τη συγκεκριμένη περίπτωση, καθώς οι άλλες λύσεις είναι είτε μέσω javascript είτε με absolute positioning, όπου όμως θα έχουμε πρόβλημα με το ύψος του container div.
Επομένως, η λύση είναι ό,τι λέει και ο τίτλος: quick and dirty.

Η ίδια λογική του right floated div πάνω από το stretchable div μπορεί να εφαρμοστεί και σε περιπτώσεις "δυάδων".

Έχω ετοιμάσει ένα demo όπου μπορείτε να δείτε το 3 column layout που ετοιμάσαμε, καθώς και 2 δυάδες μέσα στην κεντρική περιοχή, μία με αριστερό στατικό div και μία με δεξί.

Δείτε το demo και κάνετε resize τον browser σας για να δείτε πώς αυξομειώνεται το μήκος των μεταβλητών περιοχών και πώς μένει ίδιο αυτό των στατικών.