DIVy kolo siebie

pytanie zadane 10 lutego 2019 w HTML i CSS przez bigboy Nowicjusz (140 p.)

Siemka, mam problem odnośnie DIV'ow i chyba mojego CSS. Mianowicie chciałem mieć 3 divy kolo siebie,dwa są koło siebie natomiast ten 3 jest w pierwszym divie i nie moge znaleźć problemu. http://prntscr.com/mj3crs Chciałem zeby to tak wyglądało. Dodam, że jestem początkujący i dopiero zacząłem się uczyć.

HTML : http://www.wklejto.pl/712700

CSS: http://www.wklejto.pl/712701

2 odpowiedzi

odpowiedź 10 lutego 2019 przez lateM Pasjonat (17,660 p.)

W tym miejscu brakuje średnika i w "height" masz literówkę. Poprawione powinno wyglądać tak:

#kontakt{
    float: left;
    height: auto;
    width: 200px;
    margin-top: 50px;  
    margin-right: 30px;
}

Dodatkowo staraj się stylować po "class" a nie "id" i przenieś wszystkie style do pliku css. W stylach inline ciężko się odnaleźć.

komentarz 10 lutego 2019 przez bigboy Nowicjusz (140 p.)

Dziękuje , działa <3

odpowiedź 10 lutego 2019 przez program naczelny Gaduła (3,320 p.)

Kiedy używasz cssa (float: left; )trzeba zrobić "stopkę" z (clear: both;) Jak to zrobisz poprawnie to gwarantuję że zadziała ;)

komentarz 10 lutego 2019 przez bigboy Nowicjusz (140 p.)

Mógłbyś powiedzieć na czym polega ( clear:both; ) bo nie rozumiem za bardzo ;D

komentarz 10 lutego 2019 przez program naczelny Gaduła (3,320 p.)

pod divem kontakt stwórz nowy i do niego dodaj style="clear: both;" To wszystko

komentarz 10 lutego 2019 przez program naczelny Gaduła (3,320 p.)

@bigboy, Zawsze po float-ach clear: both, bo jak dalej będziesz tą stronę rozwijał to zobaczysz co się odwali

komentarz 10 lutego 2019 przez pablop76 VIP (123,120 p.)

@bigboy,

Od komentuj regułę css i zobacz różnicę

<div class="container">
	<div class="kontakt">
	Kontakt
</div>
</div>

.container{
	border: 1px solid red;
}
/* .container::after {
  content: "";
  clear: both;
  display: table;
} */
.kontakt{
float: left;
height: auto;
width: 200px;
margin-top: 50px;
margin-right: 30px;
}

float: left wyjmuje element z obiegu strony i nie pozostawia po nim miejsca, dlatego element, który go zawiera traci wysokość. clear:both zapobiega temu problemowi.