склеить div слои по вертикали, чтобы при масштабировании они не меняли положения

[Marry1]

Имеется слой shapka(на нем сверху еще три слоя):

.shapka{
		HEIGHT:176px;
		width: 940px;
		top: 30px; 
		position: relative;
		margin:0 auto;
		background-color:#224179;

	}

.risunka{position:relative; 
	z-index:1; 
	background-color:#224179;
	padding: 3px;
	float: left;
	height: 170px;
}

.zagolovok{
	position:relative; 
	top:-150; 
	left:25; 
	z-index:2;
	color:#FFFFFF;
	text-shadow: black 1px 1px 6px, red 0 0 50px;
	font-size:50px;
	float: left; /* Обтекание по правому краю */
	width: 600px;
	text-align: right;
	}

.registration{ padding: 5px; /* Поля вокруг текста */
    width: 220px; 
    float: right;
	position:relative;
	top:-150;
	z-index:3;
	right: 25;
	vertical-align: top;
	bottom: 0;
}	

.clear {
    clear: both; /* Отмена обтекания */
   }

и слой content:

.content{
		width: 940px;
		position: relative;
		margin:0 auto;
		background-color:#ADDEE2;
		margin: auto;

	}

html на странице:

<div class="shapka"><div class="risunka"><IMG src="img/f_106286511.jpg" height="170"> 
	<div class="zagolovok">Компания грузоперевозок «АВТОГРАНТ» </div></div>
	<div class="registration"> <table>	
	</table></div>
	<div class="clear"></div>
	</div>
	<div class='content'>лалала</div>

При выполнении этого кода верхний слой шапки находится постоянно на одном и том же месте при масштабировании вместе с верхними слоями, а контент уходит влево, меняется расстояние между шапкой и контентом. Выглядит так:

как не надо

Хотелось бы чтоб при масштабировании и вставленном тексте и картинках слои шапки и контента не меняли своего положения относительно друг друга и мыли склеены навечно. (пробовала уменьшить зазор с помощью top, но опять же меняется при масштабировании)

как надо

Edited June 14, 2012 by Marry1

[atew]

а вы смотрели этот пример? http://htmlbook.ru/layout/fiksirovannaya-shirina-navigatsiya-sleva