Forum PHP.pl > wyskakwiwanie z diva po uzyciu float

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: wyskakwiwanie z diva po uzyciu float

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

blawat

9.10.2010, 15:58:37

witam,

napotkalem na taki dosyc dziwny problem - chcialem sobie zrobic div'a z dolnym obramowaniem w jakims tam kolorze, w tym div'ie mialy znajdowac sie dwa kolejne div'y - jeden z parametrem float: left a drugi float: right -> po zaystosowaniu tych parametrow oba wew. div'y wyskakuja z div'a nadrzednego... dlaczego?

moj kod:

[HTML] pobierz, plaintext 
<body>
        <div id="top">
            <div id="logo">
                logo
            </div>
            <div id="login">
                login
            </div>
        </div>
    </body>
[HTML] pobierz, plaintext

i css

[HTML] pobierz, plaintext 
root {
    display: block;
}
 
body {
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
    font-size: 13px;
    padding: 0;
    margin: 10px;
    background-color: #fff;
    text-align: center;
}
 
#top {
    width: 100%;
    border-bottom: solid 1px;
    border-color: #CCCCCC;    
}
 
#logo {
    float: left;    
}
 
#login {
    float: right;
}
[HTML] pobierz, plaintext

wiem jak rozwiazac ta sytuacje ale nie wiem dlaczego tak sie dzieje... albo co zrobic zeby te elementy zostaly w div #top przy stosowaniu float...

thek

9.10.2010, 21:42:04

Wyskakują, ponieważ są opływane przez wszystkie kolejne elementy. I to niezależnie czy są one w rodzicu wspólnym, czy zupełnie poza nim, ale dalej w strukturze strony. By temu zapobiegać musisz "powiadomić" stronę, że za tymi elementami musi zachowywać się normalnie, czyli zakończyć ich opływanie. To właśnie dlatego konieczne jest użycie elementu z clear:both ustawionym. Wiele osób używa też overflow, ale moim zdaniem bardziej prawidłowe i sensowniejsze pod względem logicznym jest używanie tego pierwszego.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.