Problem z div'em (float: left)

pytanie zadane 6 kwietnia 2016 w HTML i CSS przez Stami Gaduła (3,790 p.)

Witam mam problem z float: left;

Jak widać div ląduje w (prawie) lewym dolnym rogu, a powinien pojawić się pod div,em "Ankieta"

(obchodzi nas w HTML div window (prawie na samym dole), w css jest on na samym dole)

Kod HTML:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title></title>
	
	<meta name="description" content="Opis w Google" />
	<meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link href='https://fonts.googleapis.com/css?family=Kaushan+Script|Shadows+Into+Light+Two&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	

</head>

<body>
<div id="kontener"> 

	<div id="logo">Seruszko</div>
	<div id="nawigacja"> 
		<div id="nav">
			<a href="index.html" class="tilelinkhtml5b"><div id="strona">Strona Główna</div></a>
			<a href="slowniczek.html" class="tilelinkhtml5b"><div id="slowa">Słowniczek</div></a>
			<a href="zmiany.html" class="tilelinkhtml5b"><div id="zmiany">Zmiany</div></a>
		</div>
	</div>
	<div id="spis">Spis Treści</div>
	<div id="fb">Facebook</div>
	<div id="ankieta">Ankieta</div>
	
	<div id="blog">
	<br /> <br /> <br /> <br /> <br /> <br />
	</div>
	
	<div id="window">
	<br /> <br /> <br /> <br /> <br /> <br />
	</div>
	
	</div>
</body>
</html>

Kod CSS

body
{
	/* Background pattern from subtlepatterns.com */
	background-image: url("img/tlo.png");
	margin: 10px;
}

#logo
{
	/* witdh: 10%; szerokosc */
	height: 70px; /*wysokosc */
	text-align: center;
	background-image: url("img/logo.png");
	font-size: 50px;
	font-family: 'Shadows Into Light Two', cursive;
	color: blue;
	margin-right: 486px;
	margin-left: 494px;
	/* Background pattern from subtlepatterns.com */
}

#nawigacja
{
	height: 50px;
	margin-left:50px;
	margin-right:50px;
}

#nav
{
}

#strona
{
	text-align: center;
	float: left;
	font-size: 30px;
	height: 50px;
	width: 200px;
	background-color: lightblue;
	margin-left: 30%;
	font-family: 'Kaushan Script', cursive;
	/* 237px; */
}

#slowa
{
	text-align: center;
	float: left;
	font-size: 30px;
	height: 50px;
	width: 200px;
	background-color: lightgreen;
	font-family: 'Kaushan Script', cursive;
}

#zmiany
{
	text-align: center;
	float: left;
	font-size: 30px;
	height: 50px;
	width: 200px;
	background-color: lightgrey;
	font-family: 'Kaushan Script', cursive;
}

a.tilelinkhtml5b
{
	color: black;
	text-decoration: none;
}

#spis
{
	float: left;
	font-size: 30px;
	text-align: center;
	height: 50px;
	width: 444px;
	background-color: green;
	margin-left: 50px;
	font-family: 'Kaushan Script', cursive;
}

#fb
{
	float: left;
	font-size: 30px;
	text-align: center;
	height: 50px;
	width: 600px;
	background-color: #4668b3;
	font-family: 'Kaushan Script', cursive;
}

#ankieta
{
	float: left;
	font-size: 30px;
	text-align: center;
	height: 50px;
	width: 436px;
	background-color: #d95333;
	font-family: 'Kaushan Script', cursive;
}

#blog
{
	background-image: url("img/blog.png");
	margin-left:50px;
	margin-right:486px;
	margin-top: 50px;
}

#window
	{
	float: left;
	width: 436px;
	background-image: url("img/blog.png");
	}

3 odpowiedzi

odpowiedź 6 kwietnia 2016 przez PreZmyK Pasjonat (21,470 p.)

odpowiedź 6 kwietnia 2016 przez radek024 Szeryf (77,160 p.)

odpowiedź 6 kwietnia 2016 przez jpacanowski VIP (101,940 p.)
edycja 6 kwietnia 2016 przez jpacanowski

To nie związane z twoim problemem, ale

<div id="nav">
    <a href="index.html" class="tilelinkhtml5b"><div id="strona">Strona Główna</div></a>
    <a href="slowniczek.html" class="tilelinkhtml5b"><div id="slowa">Słowniczek</div></a>
    <a href="zmiany.html" class="tilelinkhtml5b"><div id="zmiany">Zmiany</div></a>
</div>

zrób z tego listę:

<nav>
    <ul>
        <li><a href="index.html">Strona główna</a></li>
        <li><a href="slowniczek.html">Słowniczek</a></</li>
        <li><a href="zmiany.html">Zmiany</a></</li>
    </ul>
</nav>

I używaj nowych tagów HTML5, aby kod był semantyczny
http://tutorials.comandeer.pl/html5-blog.html

<div id="spis">Spis Treści</div>
<div id="fb">Facebook</div>
<div id="ankieta">Ankieta</div>

Tu tak samo lista.

    <div id="blog">
    <br /> <br /> <br /> <br /> <br /> <br />
    </div>

<br> służy do łamania tekstu. Tobie chodzi chyba o tymczasowe wypełnienie bloku czymś, więc lepiej wypełnić jakimś przykładowym tekstem. Lorem ipsum Generator http://www.blindtextgenerator.com/lorem-ipsum

iditis... też tak kiedyś robiłem... Teraz mniej... ;)