<div>

To div είναι ένα ειδικό html tag που το χρησιμοποιούμε γι να ορίσουμε κάποιο νέο τμήμα (division) της σελίδας μας. Συνήθως το χρησιμοποιούμε για να δημιουργήσουμε ένα ξεχωριστό τμήμα, με δικό του στυλ και συμπεριφορά. Όπως είναι προφανές, στο div που δημιουργούμε μπορούμε να του δώσουμε να έχει κάποια συγκεκριμένη κλάση στυλ.

Παράδειγμα: Δείτε τον κώδικα στα επόμενα δύο div:

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

CSS float & clear

Το float είναι μία ιδιότητα για το στυλ, η οποία καθορίζει πως θα "τοποθετείται" ένα αντικείμενο μέσα στο χώρο. Μπορεί να πάρει τις εξής τρείς τιμές: left|right|none, καθορίζοντας το πως θα τοποθετηθεί το αντικείμενο (δηλ. αριστερά, δεξιά, ή μόνο του).

To float το χρησιμοποιούμε όταν θέλουμε να τοποθετήσουμε αντικείμενα το ένα δίπλα στο άλλο, πχ δίνοντας στο στυλ αυτού που θέλουμε να μπει αριστερά float:left.

ΠΡΟΣΟΧΗ: Όταν βάζουμε float σε κάποια αντικείμενα, είναι πιθανό να μας "χαλάσει" στη συνέχεια η εμφάνιση της σελίδας μας, καθώς ο browser προσπαθεί να γεμίσει τα κενά που δημιουργούνται από το την τοποθέτηση αριστερά/δεξιά. Για να αποφύγουμε αυτή την κατάσταση, συνίσταται μετά τα div που έχουν float να τοποθετούμε ένα επιπλέον div με στυλ clear:both ώστε τα τμήματα της σελίδας που ακολουθούν να μην προσπαθούν να χωρέσουν ανάμεσα στα κενά αριστερά/δεξιά των αντικειμένων με float

Παράδειγμα δύο div με float:

Προσέξτε πως:
A. To 1ο εμφανίζεται δεξιά, ενώ το 2ο αριστερά
B. Προσθέσαμε ένα επιπλέον div στο τέλος που κάνει clear (δοκιμάστε να βγάλετε το τελευταίο div για να δείτε πως "μπλέκεται" η εμφάνιση).

Άσκηση

Δίνονται τα παρακάτω blocks μέσα σε ξεχωριστά div. Επιπλέον, στο στυλ της σελίδας, υπάρχουν δύο κλάσεις (left, right) οι οποίες αντίστοιχα έχουν μέσα στους float left και right. To πρώτο παράδειγμα σας δείχνει την εφαρμογή του float. Στα δύο επόμενα θα πρέπει να αλλάξετε τις κλάσεις ώστε να κάνετε αυτό που σας ζητείται:

Παράδειγμα 1: Όλα τα blocks με float:right - Απλά μελετήστε το πως τοποθετούνται

Ερώτημα 1: Ορίστε τις κλάσεις των παρακάτω div ώστε όλα να εμφανίζονται αριστερά με τη σειρά 1o...,2o,3o,4o,5o.