Przesunięcie bloczka html/css

0

Bloczek nr 5 musi się znajdować po prawej stronie obok bloczka 1 i 3. Nie mogę rozwiązać tego problemu,proszę o pomoc. Załącznik

```<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-compatible" content="IE=edge,chrome="1"/>
<title> Jan Kowalski-Portfolio </title>
<meta name="description" content="Stworzę dla Ciebie wyjątkową stronę www! Zatrudnij programistę webowego:PHP,JavaScript,HTML,CSS,MySQL,WordPress,Joomla,Drupa."> 
<meta name="keywords" content="portfolio,tworzenie strony www,itp,">

<link rel="stylesheet" href="new 1.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Fugaz+One|Patua+One" rel="stylesheet">






</head>

<body>
<div id="container">

<div class="rectangle"> 
<div id="logo">Jan Kowalski</div>
<div id="zegar">12:00:00 </div>
<div style="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="tile2">3 </div>
<div style="clear:both;"> </div>
<div class="tile4">4 </div>
</div>


<div class="square"> 
<div class="tile5">5 
</div>

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

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

</div>










</body>
</html>


```css 
```body 
{
background-color:#303030;
color:white;
font-family: 'Patua One', cursive;
font-size:20px;
}

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

.rectangle
{
width:960px;
margin:20px;	
	
}

.square
{
	width:50%;
	float:left;
	
}

#logo 
{
	float:left;
	font-family: 'Fugaz One', cursive;
	font-size:70px;
	width:600px;
	margin-top:10px;
	margin-bottom:10px;
}

#zegar 
{
	float:left;
	font-family: 'Fugaz One', cursive;
	font-size:70px;
	margin-top:10px;
	margin-bottom:10px;
	
}

.tile1
{
	margin:10px;
	width:230px;
	height:142px;
	background-color:#3095d3;
	float:left; 



}

.tile2
{
	margin:10px;
	width:230px;
	height:142px;
	background-color:orange;
	float:left; 
}

.tile3
{
	margin:10px;
	width:230px;
	height:142px;
	background-color:red;
	float:left; 
}

.tile4
{
	margin:10px;
	width:480px;
	height:142px;
	background-color:#ff3333;
	
}

.tile5
{
	margin:10px;
	width:450px;
	height:304px;
	background-color:#666666;
	float:left; 
	
}

3

Tutaj masz literówkę:

#cointener

I tutaj też masz literówkę (brakuje zakończenia cudzysłowu):

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

Ponadto brakuje zamknięcia dla:

<div id="container">

Popraw to, a będzie działać. Uzywaj wcięć przy pisaniu kodu. Po wklejeniu do edytora i zrobieniu autoindentacji kod staje się znacznie czytelniejszy i łatwiej wyłapać błędy.
https://jsfiddle.net/p5ra3ro8/

0

Dziękuję bardzo za pomoc. Taki jeden mały błąd z cudzysłowem a wszystko psuł :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1