Эластичное меню

[Троица]

Каким образом добится табличной эластичности? Через списки тоже пробовала, такая же картина. При ресайзе фон поджимается, а элементы меню уходят за границу браузера. Таблицей не предлагать - ибо задача была переписать страницу с таблиц в блоки :-)

Как видно из css левый блок с заданной шириной, а правый, где и размещается меню - по остальной ширине экрана. В словосочетаниях непечатаемый символ потому, что начинает переносится меню на вторую строку. Можно ли как то выкрутится без nbsp?

CSS:

 .logo {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 285px;
 background-color: #86adf8;
 padding-right: 2px;
 padding-bottom: 0px;
}

.top-right-place {
 height: 463px;
 background-color: #86adf8;
 padding-right: 10px;
 margin-left: 286px;
}

.top-right {
 padding-bottom: 0px; 
 vertical-align: top; 
 padding-top: 20px; 
}


.top-menu {
 border: #b8121c 1px solid;
 background-image: url(top_menu_bg.gif); 
 width: 100%; 
 color: #fff; 
 background-repeat: repeat-x; 
 height: 39px; 
 background-color: #a31217;
}

.top-menu div {
 margin-top: 11px;
}

.top-menu a {
 font: bold 9pt Arial; 
 padding-left: 2.5%; 
 padding-right: 2.5%; 
 color: #fff; 
 text-decoration: none;
}

.top-menu a:hover {
 font: bold 9pt Arial; 
 padding-left: 2.5%; 
 padding-right: 2.5%; 
 color: #fff; 
 text-decoration: underline;
}

HTML:

<div class="main">
 <div class="head">
 <div class="h1">
 <div class="logo"></div>
 <div class="top-right-place">
 <div class="top-right">
 <div class="top-menu"><div>
 <a href="">о проекте</a>|<a href="">маршруты</a>|<a href="">разместить рекламу</a>|<a href="">добавить запись</a>|<a href="">предложения турагенств</a>|<a href="">наши партнеры</a>|<a href="">форум</a></div>