Floating Div Madness upon Window Resize

css html resize css-float

10,008

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...

10,008

Author by

JBT

Updated on June 04, 2022

Comments

JBT almost 2 years
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:
1. 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.
2. 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.
3. 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.
4. 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.
5. 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!
sg3s over 12 years

No need to use a table in this situation dear sir ~_~ (I'll bring my solution in a bit)
JBT over 12 years

Thanks for the valiant effort but, after testing this out, it still has some of the issues I encountered earlier and I thought I should let you know which. While it doesn't squish the text in IE6, the box (red) still floats on top of the main page div (blue). And, still without explanation, the box (red) continues to bump up against the side of the browser in Firefox (even FF7) when resized. At best, I could add a margin to the right of the box (red), but then it started bumping up against the main page div (blue); adding borders and/or margins to either did not stop this new problem!
JBT over 12 years

Adding the text and necessary CSS into the tables and removing the cellpadding/spacing, the idea worked in IE6. To fix it in Firefox, I added a right margin to the box (red) and then, because it protruded past the border this time, remove the right page border altogether. Despite being a messy, unsemantic solution, it works; thanks. I went with a different layout (closer to my original code) some time ago and bit the bullet on compatibility, much to the admin's extreme displeasure, but I hope that I can fix it later. Regardless, I'm still looking for a more semantic solution, if there is one.
sg3s over 12 years

Well the firefox problem I can explain easily... The minimum width should have been put on the body tag, my mistake. Now when the container gets squished it just overflows over the body container meaning it will touch the right side. This is fixed here; jsfiddle.net/sg3s/uXyPu/11 I wanted to test this time but I have network connectivity issues with my machines :(
JBT over 12 years

This looks like a winner! I suppose I'll have to modify the width setting as 420px is a bit small, even for systems running IE6. However, this seems to work on all the standards-compliant browsers I tested and reasonably well on IE6. Thank you very much for all the time you've spent working on this!