'float' "rozwala" mi formularz

Question

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>	

 

Answer 1

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

Comments

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

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

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

---

Dlatego warto zastanowić się czy nie lepiej od razu nauczyć się flex-a oraz grid-a, a nie brnąć w float: left.

---

Dokładnie, też polecam od razu zapoznać się z flexem - unikniesz wielu problemów, a naprawdę nie jest trudny do nauczenia :)

Answer 2

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