Плавающее безумие Div при изменении размера окна
Я пытается создать макет исключительно на основе HTML и CSS, который представляет основное содержимое страницы слева (которое расширяется до полной ширины страницы за вычетом поля) и меньшего поля справа. , скажем, для навигации или какой-либо информации. Вот пример кода, вызывающего проблему, с проблемами, описанными в нем:
<!DOCTYPE HTML>
<html lang="en" dir="ltr">
<head>
<title>Floating Div Madness upon Window Resize</title>
<style>
* {margin:0; padding:0}
body {margin:20px; font-size:0px; color:#000000}
div.page {margin-right:120px; background-color:#AAAAFF; float:left}
div.wide {width:300px; background-color:#AAFFAA}
div.box {width:100px; margin-left:-100px; background-color:#FFAAAA; float:left}
h1 {font-size:x-large}
p {padding-bottom:5px; font-size:small}
</style>
</head>
<body>
<div class="page">
<h1>MAIN PAGE</h1>
<p>This is the main portion of the page (light blue). It is currently floated left with a right margin of 120px, to account for the box (light red) as well as the white space between it and the box (light red). All may look well on the surface, but...</p>
<p>Resize the window in Firefox (I tested both 3.5 and 4) and the white margin of the body can be cut off, not only on the right side, but on the bottom of the page, too.</p>
<p>Remove enough text and this div will shrink to fit it, no longer taking up the entire width of the page (minus the box).</p>
<div class="wide">
<p>If I nest another, non-floating div with a fixed width (light green), something even stranger happens when I resize the window, this time in Internet Explorer 6 (maybe in other versions, too): The text in the page div (light blue) is squished, I think by the margin of the box (light red). The fixed width div (light green) is unaffected by this.</p>
</div>
</div>
<div class="box">
<h1>BOX</h1>
<p>(this could be navigation, or anything else)</p>
</div>
</body>
</html>
Я хотел бы оставить поле (светло-красный) позже в коде по семантическим причинам, но это необязательно. Вот некоторые из наиболее успешных вещей, которые я уже пробовал, и почему они, похоже, не работают:
Абсолютное позиционирование: это выглядит так же хорошо, как и мой собственный код, когда размеры браузеров не меняются. В какой-то степени он решает проблему исчезновения поля тела в Firefox. Однако, когда размер окна станет достаточно маленьким, прямоугольник (светло-красный) переместится над или под div главной страницы (светло-синий), в зависимости от того, какой z-index у меня больше или меньше.
Плавающий только прямоугольник : Это включает в себя изменение HTML и размещение прямоугольника (светло-красного цвета) перед остальным содержимым кода. Это автоматически расширяет div главной страницы (светло-голубой), чего я не нашел способа сделать (без заданного количества контента) с помощью метода float. Однако поля тела по-прежнему удаляются в Firefox, текст по-прежнему сжимается в IE, а поле (светло-красный) по-прежнему будет проходить над или под (опять же в зависимости от z-индекса) div главной страницы (светло-синий), когда окно становится достаточно маленьким.
Назначение минимальной ширины всему: Это было очень успешным в решении проблемы IE, но требует некоторой работы с CSS на странице, которая является более сложной, чем эта, и которая будет поддерживать различные типы мультимедиа. И он по-прежнему не адресует поле тела в Firefox и не дает мне возможности развернуть div главной страницы (светло-синий) без содержимого, поскольку он все еще плавающий.
Изменение поля тела на границу: Это не тоже не решает проблему Firefox; будь то граница или поле, оно обрезается справа и внизу страницы, когда я использую числа с плавающей запятой.
Добавьте поле в поле: Это также не работает для Firefox. Я могу сделать так, чтобы нижнее поле содержимого главной страницы (светло-синее) оставалось на месте (это то, что мне кажется особенно любопытным), но правое поле (светло-красное) по-прежнему обрезается.
Любое помощь будет принята с благодарностью, поскольку я не могу найти никаких сайтов или сообщений, отвечающих на эти проблемы, не говоря уже о том, что эти проблемы существуют; Я определенно потратил много часов на поиск и тестирование решений!