Здравствуйте. Я только начинаю постигать искусство верстки, и делаю свою первую страницу в портфолио. Вот страница У нее существует меню, но когда я начинаю уменьшать масштаб страницы, пункты меню начинают сползать: При дальнейшем уменьшении масштаба вся верстка, просто съезжает: Прошу, помогите решить проблему, ибо на других сайтах такого нет. Прилагаю html код и css стили. <body><!--Общая обертка для сайта--><div id="wrapper"> <!-- Шапка сайта--> <div id="header"> <div id="search"> <a href="#">Войти</a> </div> <div id="main_menu_high"> <nav> <ul> <li><a href= "index.html">Главная</a></li> <li><a href="#">Авто</a></li> <li><a href="#">Мебель</a></li> <li><a href="#">Техника</a></li> <li><a href="#">Одежда</a></li> <li><a href="#">Красота</a></li> <li><a href="#">Здоровье</a></li> <li><a href="#">Отдых</a></li> <li><a href="#">Дети</a></li> <li><a href="#">Недвижимость</a></li> <li><a href="#">Подарки</a></li> </ul> </nav> </div> <div id="main_menu_low"> <ul> <li><a href= "#">Свадьба</a></li> <li><a href= "#">Обучение</a></li> <li><a href= "#">Финансы</a></li> <li><a href= "#">Животные</a></li> <li><a href= "#">Бытовые услуги</a></li> <li><a href= "#">Деловые услуги</a></li> </ul> </div> </div> <!-- Левый сайдбар--> <div id="sidebar_left"> <h3 id="transport" class="blueclass">Транспорт</h3> <div> <p><a id="SellAuto" href= "#">Продажа автомобилей</a></p> <p><a href= "#">Автозапчасти</a></p> <p><a href= "#">Автолектроника</a></p> </div> <h3 id="house" class="blueclass">Дом и дача</h3> <div> <p><a href= "#">Мебель</a></p> <p><a href= "#">Сроительство</a></p> <p><a href= "#">Ремонт</a></p> </div> <h3 id="clothes" class="blueclass">Одежда</h3> <div> <p><a href= "#">Одежда</a></p> <p><a href= "#">Обувь</a></p> </div> <h3 id="health" class="blueclass">Здоровье</h3> <div> <p><a href= "#">Прием врачей</a></p> <p><a href= "#">Диагностика</a></p> <p><a href= "#">Процедуры</a></p> </div> </div> <!--правый сайдбар--> <div id="sidebar_right"> <ul> <li><a href= "#">Прием врачей</a></li> <li><a href= "#">Диагностика</a></li> <li><a href= "#">Процедуры</a></li> </ul> </div> <!-- Поле с контентом--> <div id="central"> <ul class="table"> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Купить авто</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Сделать ремонт</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Купить мебель</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Купить бытовую технику</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Купить компьютер</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Купить одежду, обувь</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Купить квартиру, дом</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Личные деньги</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Поехать в отпуск</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Найти врача</span> </a> </li> <li class="table_item"> </li> <li class="table_item"> </li> <li class="table_item"> </li> </ul> </div> <div class="clear"></div> <!--Подвал сайта--> <div id="footer"> </div></div>body { /* background-image: url(../img/bg.png)*/ background-color: #FFFFFF;}#main_menu_high {width: 950px;height: 50px;margin: 40px auto 20px auto;padding: 0px;background-image: url(../img/menu_bar.jpg);} #main_menu_high ul {list-style: none;margin: 20px 40px;padding: 0;} #main_menu_high ul li a {height: 30px;display: block;float: left;color: #3e1c15;text-decoration: none;font-family: Arial,sans-serif;font-size: 12px;font-weight: bold;padding: 17px 15px 0 15px;}#main_menu_low { margin: 5px auto 20px auto; padding: 0px; width: 950px; height: 50px;}#main_menu_low ul { list-style: none; margin: 5px 40px; padding: 0;}#main_menu_low ul li a { height: 30px; display: block; float: left; color: #3e1c15; text-decoration: none; font-family: Arial,sans-serif; font-size: 12px; font-weight: bold; padding: 17px 15px 0 15px;}#main_menu_high ul li a:hover {color: #3c57af;}#wrapper{ width: 1000px; outline: 2px solid #cccccc; padding: 10px; margin: 0 auto;}#header { height: 200px; /*background-color: #F8AC18;*/ margin-bottom: 12px;}#sidebar_left { width: 180px; /*border: #A6A6A6 solid 1px; */ margin-bottom: 12px; float: left;}#sidebar_right { width: 180px; /*height: 200px;*/ background-color: #EBEBEB; margin-bottom: 12px; float:right;}#central { /*height: 200px;*/ width: 630px; background-color: #FFF; margin: -10px auto 12px auto; padding-top: 10px; position: relative; overflow: hidden; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left;}#footer { width: 1000px; height: 100px; background-color: #F8AC18; margin: 0 auto;}.clear{ clear: both;}Всем заранее спасибо!
