Michał Pajkert

Uwaga: Kod CSS w tych układach zawiera bardzo wiele komentarzy. Jeśli pracujesz głównie w widoku Projekt, zaglądaj do kodu — znajdziesz tam wskazówki dotyczące używania stylów CSS dla układów o płynnych szerokościach. Przed wdrożeniem własnego serwisu możesz usunąć te komentarze. Więcej informacji o technikach użytych w układach CSS zawiera następujący artykuł w serwisie Adobe Developer Center: http://www.adobe.com/go/adc_css_layouts.

Wyłączanie opływu

Ponieważ wszystkie kolumny są pływające, w tym układzie wprowadzono deklarację overflow:hidden dla bloku klasy .container. Taka technika wyłączania opływu wymusza prawidłowe zakończenie kolumn wewnątrz bloku klasy .container, tak aby krawędzie i tło tego bloku były prawidłowo wyświetlane. Jeśli umieścisz wewnątrz bloku .container zbyt duży element, wystający poza obręb tego bloku, to zostanie on ucięty. Nie można będzie również używać marginesów ujemnych ani pozycjonowania bezwzględnego z użyciem wartości ujemnych, aby przyciągać elementy znajdujące się poza blokiem .container, bo również nie będą wyświetlane.

Jeśli użycie takich właściwości jest konieczne, to musisz użyć innej metody wyłączania opływu. Najlepszą metodą jest dodanie elementu <br class="clearfloat" /> lub <div class="clearfloat"></div> za ostatnią kolumną pływającą (ale przed zamknięciem bloku .container). Da to taki sam efekt wyłączenia opływu.

Stopka

Dodanie stopki za kolumnami, ale wewnątrz bloku .container spowoduje, że metoda wyłączania opływu deklaracją overflow:hidden nie zadziała. Możesz umieścić blok stopki (.footer) wewnątrz kolejnego bloku .container, poza pierwszym. Pozwoli to uniknąć niepożądanych efektów. Najprostszym wyjściem może być skorzystanie z układu, który zawiera nagłówki i stopki — wystarczy usunąć nagłówek, aby skorzystać z metod wyłączania opływu użytych w takich układach.