• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

'float' "rozwala" mi formularz

VPS Starter Arubacloud
0 głosów
167 wizyt
pytanie zadane 4 lipca 2018 w HTML i CSS przez profsor500 Użytkownik (610 p.)

Dobry.
chciałem utworzyć 2 kolumny  koło siebie w formularzu, gdyż ma być 1 do wyboru spośród nich(połapiecie się po class'ach bez problemu) i kiedy dodam im float left czy right, to 'wyskakują' z formularza(wizualnie są poza nim) i nie mogę pojąć dlaczego.. próbuje znaleźć problem w edycji strony na chrome ale nic..
zdaje się na was 

<style>
	input, select{
		margin-top: 10px;
	}
	.formularz{
		width:800px;
		background: url(background.jpg);
	}
	.formularz_lewy, 
	.formularz_prawy{
		width: 42.5%;
		margin-left: 5%;
		position:relative;
	
		
		/*background: url(background.jpg);*/
	}
	.formularz_prawy{
		margin-right: 5%;
	}
</style>

	<form action="">
		<div class='formularz'>
		
			*Imię:<input type="text" name='customer_name'><br>
			*Nazwisko:<input type="text" name='customer_surname'><br>
			*E-mail:<input type="email" name='customer_email'><br>
			Telefon:<input type="tel" name='customer_phone'><br>
			*Rodzaj nawierzchni:
			<div class="formularz_lewy">
				<label>
					<input type=radio name=naw_radio >nawierzchnia z naszej ofery
				</label>
				<select id='sel_wh' class='select_zapytanie'>
					<option>Nawierzchnia wewnętrzna</option>
					<option>Nawierzchnia zewnętrzna</option>
				</select><br>
				<select name="set_wew" id="wew">
					<option value="">Podłogi drewniane</option>
					<option value="">Wykładziny PVC</option>
					<option value="">Nawierzchnie kauczukowe</option>
					<option value="">Wykładziny ochrone</option>
					<option value="">Wykładziny typu LINO</option>
					<option value="">Nawierzchnie poliuretanowe</option>
				</select><br>
				<select>
					<option value="">Nawierzchnie poliuretanowe</option>
					<option value="">Nawierzchnie tartanowe z rolki</option>
					<option value="">Sztuczne trawy</option>
				</select><br>
				Rodzaj usługi:
				<select name="set_wew" id="wew">
					<option value="">Podłogi drewniane</option>
					<option value="">Wykładziny PVC</option>
					<option value="">Nawierzchnie kauczukowe</option>
					<option value="">Wykładziny ochrone</option>
					<option value="">Wykładziny typu LINO</option>
					<option value="">Nawierzchnie poliuretanowe</option>
				</select>
			</div>
			<div class="formularz_prawy">
				<label>
					<input type=radio name=naw_radio> inna
				</label><br>
				<input type="text" name="inna_nazwa"><br>
				Zapytanie:<br>
				<textarea name="" id="" cols="30" rows="10"></textarea>
			</div>
		</div>
	</form>	

 

2 odpowiedzi

+1 głos
odpowiedź 4 lipca 2018 przez `Krzychuu Stary wyjadacz (13,940 p.)
przed zamknięciem diva z klasą "formularz" dodaj <div style="clear: both"></div>, wtedy powinno być już wszystko ok, polecam zapoznać się z flexem, w flexie nie ma czegoś takiego że elementy wyskakują poza obszar
1
komentarz 4 lipca 2018 przez Shaoi Mądrala (7,020 p.)

przed zamknięciem diva z klasą "formularz" dodaj

<div style="clear: both"></div>

Proponujesz dodać pusty div, w dodatku ze stylem inline. sad

komentarz 4 lipca 2018 przez kenjiro244 Dyskutant (8,600 p.)
Dlatego warto zastanowić się czy nie lepiej od razu nauczyć się flex-a oraz grid-a, a nie brnąć w float: left.
komentarz 4 lipca 2018 przez imklau Nałogowiec (42,090 p.)
Dokładnie, też polecam od razu zapoznać się z flexem - unikniesz wielu problemów, a naprawdę nie jest trudny do nauczenia :)
0 głosów
odpowiedź 4 lipca 2018 przez pablop76 VIP (123,060 p.)

Jest to spowodowane tym, że elementy stają się pływające - wyjęte z obiegu dokumentu. Przez co pojemnik traci wysokość bo nic go nie rozpycha. Lepszym sposobem poradzenia sobie z problemem jest zastosowanie pseudo elemntu :after niż tworzenie pustego div. Może warto rozważyć użycie inline- block zamiast float.

clear fix

Podobne pytania

0 głosów
2 odpowiedzi 294 wizyt
pytanie zadane 2 grudnia 2018 w HTML i CSS przez Thisisit Nowicjusz (190 p.)
0 głosów
1 odpowiedź 755 wizyt
pytanie zadane 22 września 2018 w HTML i CSS przez lach Nowicjusz (120 p.)
0 głosów
0 odpowiedzi 95 wizyt
pytanie zadane 19 kwietnia 2023 w HTML i CSS przez TheDarkSide Użytkownik (930 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...