Tile nr 5 nie chce przejść na prawą stronę. HTML odc. 3

pytanie zadane 8 lutego 2020 w HTML i CSS przez Arecky81 Nowicjusz (120 p.)

Wiem, że było już założonych kilka takich wątków, ale proszę o pomoc, bo jakoś nie mogę dojść dlaczego ten tile 5 nie chce przejść na drugą stronę (prawą). HTML odc. 3

<!DOCTYPE html>

<hmtl lang="pl"/>

<head>
	<meta charset="utf-8"/>
	<title>Jan Kowalski - Moje portfolio</title>
	<meta name="description" content="Portfolio nowego webmastera wykonane techniką kafelkową"/>
	<meta name="keywords" content="css, hmtl, portfolio, Marcin, Kowalski, zegar, strona, www"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
	<meta name="author" content="Plastikon"/>
	<link rel="stylesheet" href="style.css" type="text/css"/>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:800&display=swap" rel="stylesheet"/>
</head>

<body>

<div id="container">

	<div class="rectangle">
		<div id="name">Marcin Kowalski</div>
		<div id="clock">12:00:00</div>
		<div class="clear: both"></div>
	</div>
	
	<div class="square">
		<div class="tile1">1</div>
		<div class="tile1">1</div>
		<div style="clear: both;"></div>
	
		<div class="tile2">2</div>
		<div class="tile3">3</div>
		<div style="clear: both;"></div>
	
		<div class="tile4">4</div>
	</div>
	
	<div class="square">	
		<div class="tile5">5</div>
		<div class="yt">yt</div>
	</div>	

	<div class="rectangle"></div>

</div>	

</body>

</hmtl>

CSS

body
{
	background-color: #2F4F4F;
	color: white;
}

#container
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

#name
{
	float: left;
	font-family: 'Open Sans', sans-serif;
	font-size: 60px;
	width: 600px;
}

#clock
{
	float: left;
	font-family: 'Open Sans', sans-serif;
	font-size: 60px;
}

#footer
{
	font-family: 'Open Sans', sans-serif;
	font-size: 20px;
	text-align: center;
}

.rectangle
{
	width: 980px;
	margin: 10px;
}

.square
{
	width: 50%;
	margin: 10px;
	float: left;
}

.tile1
{
	width: 240px;
	height: 148px;
	margin: 5px;
	background-color: #3CB371;
	float: left;
}

.tile2
{
	width: 240px;
	height: 148px;
	margin: 5px;
	background-color: #2E8B57;
	float: left;
}

.tile3
{
	width: 240px;
	height: 148px;
	margin: 5px;
	background-color: #66CDAA;
	float: left;
}

.tile4
{
	width: 490px;
	height: 148px;
	margin: 5px;
	background-color: #20B2AA;
}

.tile5
{
	width: 490px;
	height: 286px;
	margin: 5px;
	background-color: #3CB371;
}

.yt
{
	width: 111px;
	margin: 5px;
	height: 148;
	background-color: #66CDAA;
}

1 odpowiedź

odpowiedź 8 lutego 2020 przez Gamin Użytkownik (780 p.)

.square
{
    width: 50%;
    margin: 10px;
    float: left;
}

W pliku CSS w square usuń margin: 10px, powinno pomóc ;)

komentarz 8 lutego 2020 przez Arecky81 Nowicjusz (120 p.)

i faktycznie pomogło ;) Dzięki. Pytanie jeszcze tylko, jakie to miało znaczenie jeśli mógłbyś opisać. Prawdopodobnie chodziło o to, że się po prostu ten square tam nie mieścił, czy tak?!

komentarz 8 lutego 2020 przez Gamin Użytkownik (780 p.)
edycja 8 lutego 2020 przez Gamin

Dokładnie. W divie o szerokości bodajże 490px (square) chciałeś wcisnąć inny o tej szerokości (tile 5), ale w tym pierwszym 10px marginesu z lewej i prawej strony to uniemożliwiło. Powodzenia w dalszym kodowaniu. Pozdrawiam

komentarz 8 lutego 2020 przez SzkolnyAdmin Szeryf (89,030 p.)

Zainteresuj się technologiami FlexBox i GridBox, a wszystkie problemy z marginesami i divami, które "nie chcą" wejść na właściwe miejsce znikną. Opływanie (float) jako technologia konstrukcji układu strony to już przeżytek. Jako ćwiczenie przerób stronę w tych technologiach. Zobaczysz różnicę.