Problem z divami. Poddaje się

pytanie zadane 18 stycznia 2016 w C i C++ przez Boby Obywatel (1,110 p.)

Witam.

Po obejrzeniu pierwsze oraz drugiego odcinka kursu html, zrobiłem sobie malutki teścik sprawdzający co potrafię już zrobić. Oczywiście wyłożyłem się na divach. Div ad nie chce wskoczyć w miejsce po prawej stronie tak jak na schemacie który załączam w linku. Co robię nie tak ? Gdzie popełniam błąd ?

<!DOCTYPE HTML>
<html lang="pl">

<head>

	<meta charset="UTF-8" />
	<title>Moja Szkola</title>
	<meta name="description" content="ZSE-1 POZNAŃ" />
	<meta name="keywords" content="szkoła, technikum, poznań, zse-1" />
	<meta htto-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<style>
	
	#container
	{
		width:1000px;
		margin-left: auto;
		margin-right:auto;
	}
	
	#header
	{
		width:1000px;
		background-color: black;
		text-align:center;
		color:white;
		padding:15px;
	}
	
	#menu
	{
		width:180px;
		min-height:840px;
		background-color:gray;
		padding:15px;
		float:left;
	}

	#container1
	{
		width:640px;
		min-height:620px;
		float:left;
		border-style:dotted;
	}
	
		#container2
		{
			width:640px;
			background-color:lightgray;
			float:left;
		}
		
			#photo1
			{
				width:270px;
				padding:20px;
				float:left;
			}
	
			#text1
			{
			
			}
	
		#container3
		{
			width:640px;
			background-color:lightgray;
			float:left;
		}
	
			#photo2
			{
				width:270px;
				padding:20px;
				float:left;
			}
		
			#text1
			{
			
			}
	
	#ad
	{
		float:left;
		background-color:lightgray;
	}
	
	</style>
	
</head>

<body>

	<div id="container">
	
		<div id="header">
			<h1>MOJA SZKOŁA</h1>
		</div>
		
		
		<div id="menu">
			START <br/>
			AKTUALNOŚCI <br/>
			O SZKOLE <br/>
			PLAN LEKCJI <br/>
			KONTAKT <br/>
		</div>
		
		<div id="container1">
		
		
			<div id="container2">	
				<div id="photo1">
					<img width="270" src="img/szkola.jpeg">
				</div>
			
				<div id="text1">
					<center>
					<br/> <br/> <br/> <br/>
					Tak wygląda moja szkoła od zewnątrz.<br/>
					Jest nawet całkiem zwyczajna.
					</center>
				</div>
			</div>
		
		
			<div id="container3">
		
				<div id="photo2">
					<img width="270" src="img/obora.jpg">
				</div>
			
				<div id="text2">
					<center>
					<br/> <br/> <br/> <br/>
					Tak wygląda moja szkoła od środka.<br/>
					Jak na piątek, jest tu dzisiaj całkiem normalnie.
					</center>
				</div>
			</div>
		
		
		</div>
		
		
		<div id="ad">
			<img src="img/ad.jpg">
		</div>
		
		
		
	</div>
	
</body>
</html>

załączniki:

Jak wygląda na tą chwilę wynik kodu: http://zapodaj.net/a0da2a29b046b.png.html

Zdjęcia oraz obrazek jak chciałbym aby całość wyglądała: http://s000.tinyupload.com/index.php?file_id=04106593701872507169

Pozdrawiam !

2 odpowiedzi

odpowiedź 18 stycznia 2016 przez Józef Mądrala (5,200 p.)

Podaj rozmiary obrazka, który wklejasz do diva ad. Na razie w ciemno stawiam, że jest szerszy niż szerokość, jaką może przyjąć div (która jest równa width container minus width menu, conteiner1 oraz ich paddingi). Jeżeli faktycznie tak jest, to po prostu przytnij swoją reklamę.

komentarz 18 stycznia 2016 przez Boby Obywatel (1,110 p.)

JEST ! Miał Pan rację. Mój problem leżał w paddingach. Mój błąd wynikał z braku wiedzy o tym jak działają paddingi. Jako dowód zamieszczam zdjęcie z sukcesem ^^

Przed:Po: