Na potrzeby tego posta załóżmy, że masz trzy elementy:
Kopiuj
<div id="container">
<div id="column1">
...
</div>
<div id="column2">
...
</div>
</div>
Elementy #column1 i #column2 mają być obok siebie, a otaczać ma je #container.
Poprawnym rozwiązaniem jest nadanie float: left; (lub right) zarówno #column1, jak i #column2. Rzadko się zdarza żeby w przypadku kolumn nadawać float tylko jednej z nich.
Rodzi to problem, na który -- jak rozumiem -- się natknąłeś. Elementy pływające (z ustawionym float) normalnie nie wpływają na wysokość elementu zawierającego. Jeśli element zawierający (u nas: #container) ma bezpośrednio w sobie jedynie elementy pływające, to wysokość elementu zawierającego wynosi zero. #container zaczyna się tam, gdzie normalnie, czyli na górze kolumn, ale kończy w tym samym miejscu, bo z punktu widzenia standardowego przepływu nie zawiera żadnej treści, która rozciągnęłaby go w pionie.
Można to zmienić na kilka sposobów.
Można dodać do #containera element czyszczący (ang. clearing). Wiemy, że jeśli jakiemuś elementowi dasz clear: both,to jest zagwarantowane, że znajdzie się on poniżej poprzedzających go w danym bloku elementów pływających. Nasz element czyszczący nie musi i nie powinien sam mieć ustawionego float. Kod HTML wyglądałby tak:
Kopiuj
<div id="container">
<div id="column1">
...
</div>
<div id="column2">
...
</div>
<div class="clearfix">
</div>
</div>
A kod CSS tak:
Kopiuj
#column1,
#column2 {
float: left;
width: 300px;
}
.clearfix {
clear: both;
}
Jak teraz wyświetlany będzie #container? Jego góra zaczyna się na górze naszych kolumn, ale co z dołem? Element .clearfix to normalny element, nie element pływający. #container musi więc rozciągnąć się w pionie tak, by objąć naszego .clearfixa. Ponieważ .clearfix ma clear: both;, jego góra będzie poniżej elementów pływających, czyli kolumn. .clearfix będzie pod kolumnami, a #container rozciągnie się tak, by go objąć -- więc siłą rzeczy #container obejmie też w pionie nasze kolumny.
To jest najprostszy do wytłumaczenia sposób, ale nie najbardziej elegancki. Dodawanie do kodu elementu .clearfix, który z punktu widzenia struktury dokumentu jest zbędny i bezsensowny, a potrzeba go jedynie do prezentacji -- to nie jest najładniejsze rozwiązanie.
Praktycznie taki sam efekt można osiągnąć, dając #containerowi overflow: hidden -- bez żadnego elementu .clearfix.
Są jeszcze inne metody czyszczenia elementów pływających (ang. clearing floats). Pogoogluj.
W Twoim przypadku możesz dodać po prostu overflow: hidden do elementu #wrapper i ewentualnie innych elementów zawierających jedynie elementy pływające.
