HTML- Problem z divem

pytanie zadane 16 października 2017 w HTML i CSS przez sheot27 Nowicjusz (170 p.)

<!DOCTYPE HTML>

<html lang="pl">

<head>

<meta charset="utf-8"/>
<meta name="description" content="Strona sklepu"/>
<meta name="keywords" content="materiały,budowlane"/>
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1"/>
<title> Strona sklepu </title>

<link rel="stylesheet" href="style.css" type="text/css"/>

</head>

<body>
	<div id="prostokat">
	
					<div class="tile1">
					
							asd
					</div>
					
					<div class="tile1">
					
							asd
					</div>
					
					<div class="tile1">
					
							asd
					</div>
					
					<div class="tile1">
					
							asd
					</div>
					
	</div>
	
	
	
	<div id="prostokat2">
			<div style="clear:both;"> </div>
					<div class="tile2">
					asdasd
					</div>
					
					<div class="tile2">
					asdasd
					</div>
					
					<div class="tile2">
					asdasd
					</div>
			
	</div>

	<div id="content">
	asdas
	</div>
		
		
		
		
</body>


</html>

body
{
		background-color:  grey;
}


#prostokat
{
	width:1000px;
	height:150px;
	background-color:black;
	margin-left: auto;
	margin-right: auto;
}
.tile1
{
	width:230px;
	height:70px;
	background-color: white;
	float:left;
	text-align: center;
	padding-top:60px;
	margin: 10px;
}
#prostokat2
{
	width: 200px;
	height:600px;
	background-color: black;
	margin-left:167px;
	margin-top:10px;
}
.tile2
{
	width:190px;
	height:190px;
	text-align: center;
	background-color: pink;
	margin:10px;
}
#content
{
	width: 30px;
	height: 30px;
	background-color: green;
	float:left;
	
}

Czy ktoś wie czemu div o ID="content" nie chce wejść obok diva prostokat2? Wiem, że to podstawy, że problem jest błahy, ale nie mogę go rozgryźć. + jakieś rady co robię źle albo co powinienem zrobić lepiej :D? Z góry dziękuję!

2 odpowiedzi

odpowiedź 16 października 2017 przez shotokan Nałogowiec (39,660 p.)
wybrane 16 października 2017 przez sheot27

Najlepsza

Dodaj do diva o id="prostokat2" właściwość css float:left
Ogólnie jeśli chcesz mieć elementy pływające to każdy musi mieć właściwość float, lub też display:inline-block, albo też po nowoczesnemu czyli korzystając z flexboxa.
Pamiętaj o wyczyszczeniu "float" przez właściwość clear i oczywiście, wielkość elementów musi być odpowiednia, np. dwa divy będą obok siebie tylko wtedy, gdy ich szerokość łaczna (plus margin i padding) nie będzie większa niż szerokość rodzica.

komentarz 16 października 2017 przez sheot27 Nowicjusz (170 p.)

Dziękuje bardzo za odpowiedź, działa jak powinno. Która, z tych wymienionych opcji jest najlepsza; float:left;, display:inline-block czy ten flexbox? Czy to może bardziej zależne od sytuacji?

1	komentarz 16 października 2017 przez shotokan Nałogowiec (39,660 p.) Każda właściwość ma swoje plusy i minusy. M. Zelent w swoim jednym z kursów wyjaśnia różnice między float a display:inline-block. Ja osobiście polecam właściwość flex bo daje duże możliwości

1	komentarz 16 października 2017 przez Vickul Stary wyjadacz (12,850 p.) W tym temacie wszystko jest ładnie wytłumaczone float:left; vs display:inline; vs display:inline-block; vs display:table-cell; ja osobiście również polecam flex. Tu masz świetną grę do nauki flexbox http://flexboxfroggy.com/