Вложеные float элементы

Очень часто, у тех, кто раньше верстал таблицами и стал переходить на блоки (я больше люблю называть слоями) появлялась такая проблема, когда элемент содержащий float-элементы схлопывается. Например нам надо организовать горизонтальное меню центрированное по центру ввиде списка.
У меню есть фон (background-color) и поля (padding), у элементов списка есть свой фон и отступы (margin). Давайте посмотрим вертикальное меню:

• Главная
• Контакты
• Карта сайта

исходный код:

<style type="text/css">
div.preview{
    background:#fff;
    border:1px #000  solid;
    width:600px
 }
ul.menu{
    list-style-type:none;
    background:#f00;
    padding:10px 5px;
    border:1px #000 dotted;
    width:400px;
    margin:10px auto;
}
ul.menu li{
    margin:0 5px;
}
ul.menu li a{
    display:block;
    background:#000;
    padding:2px;
 }
</style>
<div class="preview01">
 <ul class="menu02">
  <li><a href="http://ya.ru">Главная</a></li>
  <li><a href="http://google.com">Контакты</a></li>
  <li><a href="http://www.blogger.com/">Карта сайта</a></li>
 </ul>
</div>

Для того, чтобы пункты, выстроились горизонтально, нам надо поставить ul.menu02 li{float:left;} смотри, что получилось:

• Главная
• Контакты
• Карта сайта

Наш блок, содержащий плавающие пункт списка, схлопнулся, как будь-то пустой, и не содержит элементов. Это происходит из-за того, что блочный элемент теряет layout, говоря по русски пропадает слой(некоторые элементы не имеют layout от "рождения").

Layout можно вернуть несколькими способами:

1. Задать высоту — атрибут height. (не подходит, ведь высота иногда может быть не постоянна)
2. Задать выравнивание — атрибут float. (в нашем примере пропадет отцентровка)
3. Задать обрезание содержимого при переполнении &madsh; overflow:hidden. (вот это уже можно попробывать)
   • Главная
   • Контакты
   • Карта сайта
   
   исходный код:
   

   <style type="text/css">
   div.preview{
       background:#fff;
       border:1px #000  solid;
       width:600px
    }
   ul.menu{
       list-style-type:none;
       background:#f00;
       padding:10px 5px;
       border:1px #000 dotted;
       width:400px;
       margin:10px auto;
       overflow:hidden;
   }
   ul.menu li{
       margin:0 5px;
   }
   ul.menu li a{
       display:block;
       background:#000;
       padding:2px;
    }
   </style>
   <div class="preview01">
    <ul class="menu02">
     <li><a href="http://ya.ru">Главная</a></li>
     <li><a href="http://google.com">Контакты</a></li>
     <li><a href="http://www.blogger.com/">Карта сайта</a></li>
    </ul>
   </div>

   
   
   В IE6 как всегда не работает, но вспоминая его поведение при обработке блока с заданой высотой, можно использовать хак:
   

   * html ul.menu{
       height:1%;
   }
   

4. Используя хак для ИЕ из предыдущего пункта, можно написать еще такое:
   

   ul.menu{
       height:auto;
       min-height:2px;
       _height:2px; /*хак для ИЕ, минус — несоответствует стандартам, лучше как вредыдущем пункте, записать отдельно */
   }

   
   
   

Это не единственные методы, наверное есть ещё. Эксперементируйте, и выбирайте свой любимый метод задания layout.