HTML - Funkcja float: left;

pytanie zadane 29 lipca 2016 w HTML i CSS przez Popson Nowicjusz (160 p.)

Witam,

właśnie uczę się HTML z kursów Pana Zelenta. Za pomocą float: left; na stronie internetowej powinno się wyświetlać obok siebie kolejno: menu nawigacji "nav", następnie środkowa część strony "content" a następnie miejsce na reklamę "ad". Problem mam taki, że po odpaleniu stronki wszystko jest jedno pod drugim i nie wiem czy mam w kodzie gdzieś błąd czy coś pominąłem i tego nie widzę.

Pozdrawiam

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>Pierwsza strona internetowa. Rozmieszczenie elementów.</title>
	<meta name="description" content="Sprawdzam swoje umiejętności" />
	<meta name="keywords" content="strona internetowa, strona, internet, tworzenie stron" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	
	<style>
	#container
	{
	
		width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	#logo
	{
		background-color: gray;
		color: green;
		text-align: center;
		padding: 15px;
	}
	#nav
	{
		float: left;
		background-color: lightgrey;
		width: 120px;
		min-height: 620px;
		padding: 10px;
	}
	#content
	{
		float: left;
		padding: 20px;
		width: 600 px;
	}
	#ad
	{
		float: left;
		width: 160px;
		min-height: 620px;
		padding: 10px;
		background-color: lightgrey;
	}
	#footer
	{
		clear: both;
		background-color: black;
		color: white;
		text-align: center;
		padding: 20px;
	}
	</style>
	
	
</head>

<body>

	<div id="conteiner">
	
		<div id="logo">
			<h1>Najlepsze strony internetowe.</h1>
		</div>
		
		<div id="nav">
			Strona główna<br />
			Układ strony<br />
			Cennik<br />
			Kontakt<br />
		</div>
		
		<div id="content">
		<h2>Lorem Ipsum</h2>
		Jest to tekst stosowany jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker
		
		</div>
		
		<div id="ad">
		<img src="img/panelowe_pionowe_waskie.png"/>
		
		</div>
		
		<div id="footer">
		Najlepsze strony internetowe. &copy; Wszelkie prawa zastrzeżone.		
		</div>
	
	</div>
	
</body>

</html>

3 odpowiedzi

odpowiedź 29 lipca 2016 przez Slajev Początkujący (440 p.)

odpowiedź 29 lipca 2016 przez Sarvite Obywatel (1,210 p.)
edycja 29 lipca 2016 przez Sarvite

odpowiedź 29 lipca 2016 przez Popson Nowicjusz (160 p.)

Dzięki za pomoc. Błędem okazała się spacja przy width. Zmiana z "id" na "class" spowodowała, że wszelka kolorystyka znikła (tła, napisów) a efekt był taki sam ( wszystko było jedno pod drugim a nie obok siebie).

Pozdrawiam

komentarz 29 lipca 2016 przez LifeLike Nowicjusz (170 p.)

W <style> zmień z # na . (kropka) w miejscach w których zmieniłeś na klasę.

np.

".container" (w zależności, które są klasą, a które Id). ID = #, klasa = .