Позициониране на div-ове

[Galli]

Може ли примерен код как да направя това.

Да не се разместват като се свие прозореца и разстоянията м/у тях да е едно и също?
Примерно съм направвил това

<!DOCTYPE html>
<html>
	<head>
		
	</head>
	<body>
		<div style="position:absolute;width:100%;height:100%;left:0;top:0;right:0;background-color:red;">
			<div style="position:absolute;left:10px;width:50%;background-color:#eee;">
			left
			</div>
			<div style="position:absolute;right:10px;width:50%;background-color:#ccc;">
			right
			</div>
		</div>
	</body>
</html>

но после как?

 

[shterev]

Има 2 вариянта, без посишън. 1 да е като две колони и 2 да не е на колони

 

[shterev]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Добре дошли!</title>
<link rel="shortcut icon" href="img/icon.ico" />
<style>
	.main{
		margin:0 auto;
		padding:20px;
		width:612px;
		background:#ccc;
	}
	.left{
		width:300px;
		float:left;
	}
	.right{
		width:300px;
		float:right;
	}
	.red{
		margin-bottom:5px;
		height:100px;
		background:#ff0000;
	}
	.green{
		height:100px;
		background-color:green;
	}
	.blue{
		margin-bottom:5px;
		height:100px;
		background-color:blue;
	}
	.yellow{
		margin-bottom:5px;
		height:100px;
		background-color:yellow;
	}
	.pink{
		height:100px;
		background-color:pink;
	}
</style>

	</head>
	<body>
		<div class="main">
			<div class="left">
				<div class="red"></div>
				<div class="green"></div>
			</div>
			<div class="right">
				<div class="blue"></div>
				<div class="yellow"></div>
				<div class="pink"></div>
			</div>
			<div style="clear:both;"></div>
		</div>
	</body>
</html>

Ето ти едно демо с 2 колони.

 

[Galli]

Междувременно и аз направих един опит, но не мога да му направя разстоянията между отделните кутии.
Ето го http://pv.comuf.com/wt/new.php
Опитах да променя твоя и да го направя на дължина 100%, за да не стои само в средата, но се получи един скрол долу.

 

[shterev]

намали височината на това RIGHT BOTTOM

 

[Galli]

Защо да я намалям, виж картинката в първия пост. Кутиите може да са с различна височина.
Дължините са важни: всички отляво да са с една и съща дължина, всички отдясно също.
И това, което не мога да направя е разстоянието между тях.
Ето картинка.

 

[shterev]

.main {
background:none repeat scroll 0 0 #CCCCCC;
margin:0 auto;
padding:5px;
width:605px;
}

Така са ти на 5 пиксела. контролира се от падинга и ширината.Поиграй си малко и виж как точно работи. С ако увеличаваш width разстоянието между колоните ще се увеличава, а падинга е за другите разстояние горе , долу иляво и дясно