Троица

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