Форум программистов [Powered by Invision Power Board]

Всем привет. На сайте есть горизонтальное меню, не резиновое, как и сам сайт. При попытке растянуть меню на всю ширину экрана:

Код


#site{
    width: 100%
}

меню начало ломаться (элементы меню начали соскакивать вниз), при сжатии окна. Шаблон сайта, полностью на дивах. Подскажите как это побороть. Вылаживаю ниже код:

Код


<div id="site">

<!-- шапка -->
   ......................................
<!--  ===== -->
    
<!-- Меню -->
    <div class="header_nav_bg">
        <div class="header_nav"><a href="/">Главная</a></div> 
        <div class="header_nav_line"></div>  
            <!-- Далее подобным образом -->
        </div>
</div>

Код


#site{

    width: 1004px;
}

div.header_nav_bg{ /*Фоновая картинка в шапке навигация*/
    width: 100%;
    height: 51px;
    background-image: url(images/header_bg_nav.jpg);
    background-repeat: repeat-x;
    BORDER-TOP: #FFFFFF 1px solid;
}

div.header_nav{
    float: left;
    text-align: center;
    padding-top:15px;
    width: 140px;
}

div.header_nav_line{/*Разделитель в навигации*/
   width: 4px;
    height: 51px;
    background-image: url(images/header_bg_nav_line.jpg);
    background-repeat: no-repeat;
    float: left;
    margin-left:10px;
    margin-right:10px;
}