Как сделать div автоматически достаточно широким для размещения его плавающих дочерних элементов?

 #MainNavBar {background: url ('../ assets / design / images / MainNavGrad.jpg') repeat- x scroll 0 0 прозрачный; высота: 43 пикс; нижнее поле: 10 пикселей; } .NavSpace {background: url ('../ assets / design / images / NavSpacer.jpg'); плыть налево; ширина: 2 пикселя; высота: 100%; } / * ------------------------------------ * \ NAV \ * ------ ------------------------------ * / #nav {float: left; ширина: 100%; стиль списка: нет; font-weight: жирный; нижнее поле: 10 пикселей; } #nav li {float: left; поле справа: 10 пикселей; положение: относительное; дисплей: блок; } a.MainNavButton {/ * Основные кнопки * / text-transform: uppercase; семейство шрифтов: вердана; font-weight: жирный; размер шрифта: 11 пикселей; выравнивание текста: центр; тень текста: 1px 1px 1px rgba (0,0,0,0.75); / * Тень текста, чтобы немного приподнять * / color: #fff; дисплей: блок; отступ: 12px 21px 16px 21px; / * ВЕРХНИЙ ЛЕВЫЙ ВНИЗ СПРАВА * / -moz-border-radius: 2px; -webkit-border-radius: 2 пикселя; радиус границы: 2 пикселя; } #nav li a: hover {color: #fff; фон: # 444444; / * Переход сплошного цвета * / text-decoration: underline; } / * --- DROPDOWN --- * / / * * 
 
 
 
 
  Главная страница  
 
   
 
 #MainNavBar {background: url ('../ assets / design / images / MainNavGrad.jpg') repeat-x scroll 0 0 прозрачный; высота: 43 пикс; нижнее поле: 10 пикселей; } .NavSpace {background: url ('../ assets / design / images / NavSpacer.jpg'); плыть налево; ширина: 2 пикселя; высота: 100%; } / * ------------------------------------ * \ NAV \ * ------ ------------------------------ * / #nav {float: left; ширина: 100%; стиль списка: нет; font-weight: жирный; нижнее поле: 10 пикселей; } #nav li {float: left; поле справа: 10 пикселей; положение: относительное; дисплей: блок; } a.MainNavButton {/ * Основные кнопки * / text-transform: uppercase; семейство шрифтов: вердана; font-weight: жирный; размер шрифта: 11 пикселей; выравнивание текста: центр; текстовая тень: 1px 1px 1px rgba (0,0,0,0.75); / * Тень текста, чтобы немного приподнять * / color: #fff; дисплей: блок; отступ: 12px 21px 16px 21px; / * ВЕРХНИЙ ЛЕВЫЙ ВНИЗ СПРАВА * / -moz-border-radius: 2px; -webkit-border-radius: 2 пикселя; радиус границы: 2 пикселя; } #nav li a: hover {color: #fff; фон: # 444444; / * Переход сплошного цвета * / text-decoration: underline; } / * --- DROPDOWN --- * / / * * 
 
 
 
 Список 1 
 
  Продукт  
 
  Познакомьтесь с командой  
  
 
 
 Список 2 
 
  Продукт  
 
  Познакомьтесь с командой  
 
 div > 
 
  * / div.SubNavWrapper {float: left; отступ: 30 пикселей; padding-top: 0 пикселей; позиция: абсолютная; фон: прозрачный; слева: -9999 пикселей; / * Скрыть вне экрана, когда он не нужен (это более доступно, чем display: none;) * /} div.SubNav {float: left; ясно: оба; ширина: 600 пикселей; отступ: 30 пикселей; граница: 1px solid # 222; граница-верх: нет; фон: # 444; } div.SubNavSectionWrapper {float: left; ширина: 150 пикселей; высота: 200 пикселей; поле справа: 45 пикселей; } div.SubNavSectionTitle {/ * Заголовок подраздела * / text-transform: uppercase; семейство шрифтов: вердана; font-weight: жирный; размер шрифта: 11 пикселей; padding-bottom: 3px; нижнее поле: 3 пикселя; нижняя граница: твердое тело 1px # 333; цвет: #fff; } ул. SubNavSectionList {стиль списка: нет; } ul.SubNavSectionList li {padding-top: 1px; / * Введение отступа между li и a, создающее иллюзию разнесенных элементов * /} ul.SubNavSectionList li a {/ * Ссылки подменю * / font-family: verdana; font-weight: жирный; размер шрифта: 11 пикселей; цвет: #fff; отступ: 4px 0px; } ul.SubNavSectionList a {white-space: nowrap; / * Прекращаем перенос текста и создание многострочных выпадающих элементов * / display: block; } #nav li: hover div.SubNavWrapper {/ * Отображение раскрывающегося списка при наведении курсора * / left: -30px; / * При необходимости вернуть на экран * / / * должно соответствовать SubNavWrapper !! * / непрозрачность: 1; / * Переход к непрозрачному * /} #nav li: hover a {/ * Установить стили для верхнего уровня при наведении курсора на раскрывающийся список * / background: # 444444; / * Переход сплошного цвета * / text-decoration: underline; } #nav li: hover ul. SubNavSectionList a {/ * Переопределить некоторые стили верхнего уровня при наведении курсора на раскрывающийся список * / text-decoration: none; } #nav li: hover ul.SubNavSectionList li a: hover {/ * Установить стили для раскрывающегося списка при наведении курсора на элементы * / background: # 333; / * Переход сплошного цвета * / text-decoration: underline; }  
 
 
  Главная страница  
 
   Животные   
  
   
 
 Птицы 
 
  Попугаи  
 
 
  
  
  
  
 
 
 

 Я получил это, заставив родительский элемент иметь фиксированную ширину. Но родительский элемент должен варьироваться в зависимости от его дочерних элементов, а не иметь фиксированную ширину.