Forum PHP.pl > [CSS]Div wychodzi z diva

Pomoc - Szukaj - Użytkownicy - Kalendarz

Gecko

8.01.2009, 12:20:58

[HTML] pobierz, plaintext 
<div class="tresc">
    <div class='ramka'>
        <div class='naglowek'>
            Użytkownicy
        </div>
            aaaaaaaa            
            <div class='osoba'>
                <img src=></img>
                <br>
                Kto
                <br>
                Admin
            </div>
            <div class='osoba'>
                <img src=></img>
                <br>
                Kto
                <br>
                  Admin
            </div>
    </div>
</div>
[HTML] pobierz, plaintext

Kod

   .tresc {
   width: 604px;
   float: left;
   overflow: hidden;
   background-color: #006699;
   height: 100%;
   }
   .naglowek
   {
   background-color: #003366;
   }
   .ramka {
   margin-left:5px;
   margin-right:5px;
   margin-bottom:15px;
   border: solid #003366 2px;
   }
   .osoba {
   margin-left:15px;
   margin-top:15px;
   text-align: center;
   width: 100px;
   }

Gdy dla .osoba nie ma ustawionego float:left; divy układają się tak:
Bez float
Zaś gdy ustawie float: left; dla .osoba:
Float left
Jak widać te mały divy (które wyświetlają w sobie obrazek etc.) wyskakują z diva ramka po ustawieniu float: left;. Dlaczego tak się dzieje?
Chcę uzyskać coś takiego:
Tak ma być
Z góry dziękuję za pomoc.

JoShiMa

8.01.2009, 12:27:31

Cytat(Gecko @ 8.01.2009, 14:20:58 )

Jak widać te mały divy (które wyświetlają w sobie obrazek etc.) wyskakują z diva ramka po ustawieniu float: left;. Dlaczego tak się dzieje?

Bo właśnie na tym polega float. Diw robi się "pływający".

Cytat(Gecko @ 8.01.2009, 14:20:58 )

Chcę uzyskać coś takiego:
Tak ma być

Za tymi divami, które mają float wstaw jakiś niewidoczny element ze stylem clear:both; i będzie po kłopocie.

Gecko

8.01.2009, 12:40:18

Dzięki, pomogło

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.