[CSS] Float, Clear, Position

[Damian19]

Witam.
Mam problem z floatami.

Otóż mam 3 listy ul które są w divie z szarym tłem (tło się rozciąga względem zawartości).
Do każdej z nich przypisałem float: left; aby były obok siebie, a nie jedna pod drugą.

Po użyciu float: left; szare tło czyli div w którym są ul popsuło się(tak jakby nic w nim nie było).

Jaką funkcję przypisać by mimo "floatów" div był normalny ?

PS. Próbowałem clear: none;, clear: both; lecz nic nie dało.
PS 2. Każda lista ul ma swój div.

Pozdrawiam.

[Kartofelek]

a próbowałeś overflow:hidden dla rodzica?
A najlepiej poszukaj w necie czegoś takiego jak clearfix. No dobra - poszukam za ciebie:

Kod:

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

dodaj dodatkową klasę clearfix dla rodzica. Bez overflow:hidden. Czemu tak? Bo overflow poza tym że jest fajny to ukrywa wszystko poza elementem, czyli nie zawsze się sprawdza (np gdy masz długi select itp)

[Damian19]

Kod:

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Gdzie te klasy dodać ?
I czy wszystkie te klasy dodać ?

Opisz mi jak możesz co poszczególna klasa robi.

---

Już sobie poradziłem dodałem klasę

Kod:

.clearfix:before, .clearfix:after { content: ""; display: table; }

Pomogło pozdrawiam i dziękuję.

---

Dokładnie to zrobiłem to tak:

HTML:

Kod:

<div id="footer">
    <div id="footerContent" class="clearfix">
        <div id="footerRecommended">
            POLECAMY:
            <ul>
                <li><a href="#">Polacane linki</a></li>
                <li><a href="#">Polacane linki</a></li>
                <li><a href="#">Polacane linki</a></li>
                <li><a href="#">Polacane linki</a></li>
                <li><a href="#">Polacane linki</a></li>
            </ul>
        </div>
        <div id="footerSupport">
            WSPIERAJA NAS:
            <ul>
                <li><a href="#">Link do wsparcia</a></li>
                <li><a href="#">Link do wsparcia</a></li>
                <li><a href="#">Link do wsparcia</a></li>
                <li><a href="#">Link do wsparcia</a></li>
                <li><a href="#">Link do wsparcia</a></li>
            </ul>
        </div>
        <div id="footerPublicity">
            REKLAMY:
            <ul>
                <li><a href="#">Twoja reklama</a></li>
                <li><a href="#">Twoja reklama</a></li>
                <li><a href="#">Twoja reklama</a></li>
                <li><a href="#">Twoja reklama</a></li>
                <li><a href="#">Twoja reklama</a></li>
            </ul>
        </div>
    </div>
</div>

CSS:

Kod:

#footer {
    background-color: #D9D9D9;
    background-repeat: repeat-x;
}

#footerContent {
    width: 1024px;
    margin: 0 auto;
    font-family:"Microsoft New Tai Lue";
    font-weight: bold;
    font-size: 14px;
    text-shadow: 1px 1px #FFFFFF;
    color: #666666;
    padding: 10px 0;
}

#footerContent, .clearfix {
    display: table;
}

#footerContent ul {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-shadow: none;
    list-style-image: url('images/arrow_icon.png');
    margin: 0;
    padding: 10px 0 0 15px;
}

#footerRecommended {
    float: left;
}

#footerSupport {
    float: left;
    padding-left: 50px;
}

#footerPublicity {
    float: left;
    padding-left: 50px;
}

Działa It works!

[Kartofelek]

Ale użyj 3 deklaracji clearfixa (czyli do styli wrzuć tak jak ja podałem), dzięki temu będzie on działał pod resztą przeglądarek