Μάθετε πώς να κάνετε clear floating layers (divs).
Ένα συχνό πρόβλημα που αντιμετωπίζουν οι web designers όταν χρησιμοποιούν float layer layouts είναι ότι το βασικό layer (container) που περιέχει τα floats δεν μεγαλώνει σε ύψος (stretch) για να τα καλύψει (wrap). Αυτό ουσιαστικά είναι ένα σημαντικό θέμα που δεν τους επιτρέπει να έχουν πλήρη έλεγχο των divs (layers) και τους μειώνει τις εικαστικές δυνατότητες.
ΠΑΡΑΔΕΙΓΜΑ
Ας υποθέσουμε πως θέλετε να σχεδιάσετε ένα layout με δύο στήλες που στο πίσω μέρος (background ) του να είναι χρώματος γκρι. Ορίζετε λοιπόν το βασικό σας div (container) με background-color γκρι το οποίο θα φιλοξενήσει τα δύο floating divs.
}
#container {
background-color: #CCCCCC;
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
Ύστερα ορίζετε και τα δύο floats που θα είναι ουσιαστικά οι δύο στήλες που θα περιέχουν το κείμενο της ιστοσελίδας σας.
}
#left_div {
float: left;
width: 200px;
}
#right_div {
float: right;
width: 500px;
}
Aς δούμε το παράδειγμα με το πρόβλημα όπως προκύπτει.
Ουσιαστικά ή λύση είναι πολύ απλή, ορίζετε ένα div με clear-both attribute κάτω από τα floating divs και έχετε το επιθυμητό αποτέλεσμα.
}
#clear_all {
clear: both;
}
Υπάρχουν και άλλοι τρόποι που μπορείτε να χρησιμοποιήσετε εάν δεν σας ικανοποιεί ο παραπάνω τρόπος όπως:
http://www.positioniseverything.net/easyclearing.html
http://www.quirksmode.org/css/clearing.html
ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Μάθετε πώς να κάνετε clear floating layers (divs). γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.
