У меня есть следующая базовая раскладка:
<div id="sidebar" style="float: left; width: 250px; display block;"></div>
<div id="maincontent"></div>
Совершенно очевидно - слева у меня есть навигационные материалы и информация, а остальная часть страницы является основным содержанием.
У меня есть пользовательский элемент управления, для которого я использую следующее:
<div id="weather-data">
<div id="today" style="float: left;"></div>
<div id="tomorrow" style="float: left;"></div>
<div id="etc" style="float: left;"></div>
</div>
Каждый блок отображает изображение и текст для ежедневной погоды.
Все вышеперечисленное отображается нормально, но проблема в следующем:
Высота боковой панели (в качестве примера) составляет 400 пикселей. maincontent div содержит дочерний div weather-data , который имеет высоту 200px. В пределах данных о погоде деления меньшие деления перемещаются влево.
Ниже данных о погоде div Я хочу немного текста. В этом и заключается трудность.
Если я очищаю поплавок после данных о погоде , он также очищает боковую панель, вызывая большой кусок пустого пространства.
<div class="weather-data">
<div id="today" style="float: left;"></div>
<div id="tomorrow" style="float: left;"></div>
<div id="etc" style="float: left;"></div>
<div style="clear: left;"></div>
</div>
Некоторые грубые диаграммы ...
Что я хочу:
[@@@][##########################]
[@@@][##########################]
[@@@][##########################]
[@@@][ Additional text ]
[@@@][ ]
[@@@][ ]
[ ][ ]
Что я получаю:
[@@@][##########################]
[@@@][##########################]
[@@@][##########################]
[@@@][ ]
[@@@][ ]
[@@@][ ]
[ ][ Additional text ] <-- Additional text jumps down below the sibebar content :o(
Где @ - боковая панель контент, # - weather-data div.
Небольшое обновление ... настройка переполнение: скрыто; в div с данными о погоде работает, но разве это не рискованно?