Код (я удалил логотип, внизу объясню почему):
<!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=windows-1251">
<title>Макет </title>
<link rel="stylesheet" type="text/css" href="my.css" />
</head>
<body>
<div class = "case">
<div id="header_backgr">
<div id="header">
<div id="header_content">
<div class="notify_box"><a href="#">
Lorem ipsum dolor sit amet</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus.
</div>
<div class="notify_box"><a href="#">Aenean massa. Cum sociis natoque </a><br />
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="um_backgr">
<div id="upper_menu">
<div class="um_l_box">
<span><a href="#">Главная </a></span> <!-- &cat=all" -->
<span><a href="#">Каталог </a></span>
<span><a href="#">Помощь</a></span>
</div>
<div class="um_r_box">
<span><a href='/login_form.php'>Войти</a></span>
<span><a href='/form_reg.php'>Регистрация</a></span>
</div>
</div> <!-- end div#upper_menu -->
<div style="clear: both;"></div> <!-- div чтобы не схлопывался div id="um_backgr"-->
</div> <!-- end div#um_backgr -->
</div> <!-- end div.case -->
</body>
</html>
Стиль:
/* -------- ОБЩИЕ ДЛЯ ВСЕГО ДОКУМЕНТА --------------------------------------------------------------------------------- */
body {
margin:0; font:12px/18px Tahoma,Verdana,Arial,Helvetica,sans-serif;
background-color: #FFF;
font-size: 1em; /* default page font size is 10px (1em) */
}
html, body {height:100%;}
body{ margin: 0; padding: 0; /*outline: none;*/
}
div.case {
margin:0 auto;
padding:0;
background: #FFF;
}
a img { border: none } /* убираем синюю рамку */
a:link { color:#06F; text-decoration:none }
a:hover {color:#06F; text-decoration:underline} /*цвет и стиль при нахождении над ссылкой верхнего меню*/
/* ******************ШАПКА **********************/
#logo { /* логотип */
width:250px;
height:85px;
float:left;
padding:10px;
}
.notify_box {
width: 290px;
float:left;
line-height:15px;
text-align:justify;
padding:10px 25px 0 25px;
font-size:0.825em;
}
#header_backgr, #header {
background-image:url(../img/bkgr1.png);
background-repeat:repeat-x;
}
#header { /* div, вмещающей логотип и контент шапки */
width:1000px;
float:left;
}
#header_content { /* div, вмещающей только контент шапки (без логотипа) */
padding-right:23px;
float:left;
}
/* *************ВЕРХНЕЕ МЕНЮ **************************************** */
#um_backgr {
position:relative;
}
#um_backgr, #upper_menu, #um_backgr .um_r_box {
background-image:url(../img/upperMenu1.gif);
background-repeat:repeat-x;
border:1px solid #999;
margin: 0 0;
}
#upper_menu {
width:100%;
float:left;
margin:-1px;
padding:0;
border-right:0;
overflow:visible;
}
.um_l_box { /* левая часть верхнего меню */
float:left;
padding:10px 0px 10px 10px;
font-size:0.925em;
}
#um_backgr .um_r_box { /* правая часть верхнего меню */
float:right;
font-size:0.925em;
padding:10px 0px 10px 10px;
border:none;
}
#upper_menu span, #upper_menu span.sr, #um_backgr .um_r_box span {
padding:5px 15px 5px 0px;
font-size:1em;
}
#upper_menu a {
color: #000;
font-weight: 600;
text-decoration: none;
}
#upper_menu a:hover { /*цвет и стиль при нахождении над ссылкой верхнего меню*/
color: #C90;
text-decoration:underline;
}
Логотип я удалил, потому что он всё ломал. Если хотите, чтобы верхние три пункта стояли "в строку" и не съезжали никуда - делайте их таблицей.
Дальше. Если вы хотите масштабируемости с сохранением пропорций и позиций элементов - то вам нужна "резиновая" вёрстка с указанием размеров в процентах. Остальное посмотрите в коде. У меня всё смотрелось достаточно неплохо))