Въпрос за CSS позициониране

[confiscate]

Здравейте
Наскоро почнах да уча CSS и да се упражнявам съответно по специално в позициониране на елементи , защото според мен това една от най-съществените части на CSS.
Опитах се да подредя тези три таблици , но нещо не се получи :?
Под моята резолюция си се виждат добре под всички браузъри , но на други резолюции се разместват ... защо така ? Може ли да ми обясните ? И да споделите кой и най -подходящия начин за позициониране на различни елементи

А ето кодовете за упражнението което се опитах да направя:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
	<div id="header">
		<h1>Header</h1>
		</div>
		<div id="menu">
			<p> Na4alo</p>
			<p> Proba2</p>
			</div>
			<div id="main">
				<h1>MAIN</h1>
				</div>
		</body>
		</html>

style.css

div#header{
	background-color:#CCC;
	width:900px;
	margin:0 auto;
}

div#menu{
	width:150px;
	height:200px;
	padding:5px;
	background-color:yellow;
	position:absolute;
	top:58px;
	left:270px;
}

div#main {
	width:740px;
	height:200px;
	background-color:red;
	position:absolute;
	top:58px;
	left:430px;
	
}

Въпроса е аматьорски , но всеки е почнал от 0-та все пак
Благодаря предварително за помощта!!!

 

[lub4o]

Като използваш Абсолютно позициониране се вижда добре на твоята резолюция, но на други има размествания, за това прегледай тези уроци

 

[tedobedo]

Ползвай margin и padding