Menu
I am trying to create a purely HTML and CSS-based layout that presents the main content of a page on the left (which expands to the full width of the page, minus the box) and a smaller box on the right, say for navigation or information of some sort. Here is an example of the code that is causing the problem, with the problems described therein:
<!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>
I would like to keep the box (light red) later in the code for semantic reasons, but this is optional. Here are some of the more successful things I've already tried, and why they don't seem to work:
Absolute positioning: This appears just as nicely as my own code when the browsers are not resized. It does address the disappearing body margin in Firefox to some degree. However, when the window size gets small enough, the box (light red) will go over or under the main page div (light blue), depending on the which z-index I have higher or lower.
Floating only the box: This involves changing the HTML and placing the box (light red) before the rest of the content in the code. This automatically expands the main page div (light blue), something I haven't found a way to do (without a given amount of content) using the float method. However, the margins of the body are still removed in Firefox, the text still squishes in IE, and box (light red) will still go over or under (again depending on the z-index) the main page div (light blue) when the window gets small enough.
Assigning min-width to everything: This was very successful in stopping the IE problem, but requires some CSS work on a page that is any more complex than this and which will support different media types. And, it still doesn't address the body margin in Firefox or give me a way to expand the main page div (light blue) without content, since it is still floating.
Changing the body margin to a border: This doesn't solve the Firefox problem either; whether it is a border or a margin, it gets chopped off on the right and bottom of the page when I use floats.
Add the margin to the box: This doesn't work for Firefox, either. I can get a bottom margin on the main page content (light blue) to stay in place (this is something that seems especially curious to me), but a right margin on the box (light red) still gets cut.
Any help would be greatly appreciated, as I cannot find any sites or posts answering these problems, much less describing that these problems exist; I've certainly put in a large number of hours looking for and testing solutions!
866
Good day to you dear sir, you seem to have trouble building layouts.
As I understood it you want a 2 column layout. Left column auto expands to the width of w/e it is in minus the right columns width minus 20 pixes for margin. Right column is a fixed width and will contain a menu or assorted html structures...
In the left column you have text and among other things, a fixed width box, the fixed width box in this column should always stay inside it. This means we want a minimum width wich is the fixed width box width + 20 px margin + the right column width.
I did that by making a container arround all of the content, applying min width to that and making a dummy container to solve the min width problem in IE6.
Here is a working example of how this looks: http://jsfiddle.net/uXyPu/
I don't have a version of IE6 or firefox 3.5 running to test it but I am fairly confident this will work.
As a side note, you used a margin on the body tag, don't do it. As a base rule keep your body fully expanded, at most apply a padding. Aside this, avoiding margins is a good way to prevent a merriad of problems in IE6 while still keeping your layout compatible with modern browsers. And don't use padding / margin at all on floated elements...
The gentleman in the first comment on your question was right about avoiding ie6 altogether, I hope you asked big bux to do this project so the company might actually start thinking about their abuse of ie6...
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
