Simple float/clear in text areas
Fixed Page - Utilizing the clear property of a div between paragraphs, a clear on the 2nd paragraph and an overflow: auto on the first paragraph
Let's see some "issues" that we'll run into with Firefox...IE6 and IE7 will automatically stretch the containing box like a table...
Issue 1: Too much content for containing box height (Fix: Take out the height)
In this example we've added more text, if we don't remove the height we'll get this.
Fixed page - Text flowing around a box which is inside a box. Lots more text, height property removed on box to fix overflow.
Issue 2: Taller floated element. (Fix: Take out the height (if applicable), use a clearing div)
In this example we have much less text next to an element that is floated in the box. Elements that are floated are taken "out of the flow" of the box and not used to calculate height, if we don't tweak, we'll get this (at least in FF).
Fixed page - Text flowing around a box which is inside a box. Less text, using div with clear: both as last thing in box to make box stretch
Issue 3: Both boxes set to float to give two column look to box. (Fix: height removed/using a clearing div)
Let's say you don't want to have the text flow under the box with the images in it, one thing you can do is set a column to float to the right of the element that is floated to the left. What we've done here is take the content boxes with the latin and wrap them inside another box (div) which is set to float to the right of the box with the images and have a width of 500. This is what happens in FF.
Fixed page. Two columns inside box. Width at original 700px. Width for right side box set so both boxes plus padding and margins, fits inside 700px box. Using div with clear: both as last thing in box to make box appear to stretch.
Short Answer...no height setting, div with clear: both as last item in containing div
(I know IE7 and FF2 support min-height/min-width, but IE6 doesn't and it still has market share 10.07)
Issue 4: Let's say we like the two column approach to this but we want to have a fixed box height for the content box so the images box and text box "line up". (Fix: overflow: auto;)
If we reset the height of the content box to 400px. We get this.
Fixed page. Two columns inside box. We have the height of the text box set to 400 with the overflow: auto property set for the box. Overflow: auto will add a scroll bar if necessary. (If you do this for a "whole page" make sure people don't have to scroll the browser window to scroll the content box)
Issue 5: Using overflow: auto to fix problems 1-3
overflow: auto works great in the example above to create a scrollbar when needed, but if you don't want to set the height and want to be able to have the container box height calculated based on the elements that are in it, you can also use overflow: auto rather than a div with clear: both. This is especially nice as you don't need any non-semantic markup in the xhtml to accomplish the visual effect. Using this example of the two floated columns we see again what happens in FF.
Fixed page. Two columns inside box. Width at original 700px. Width for right side box set so both boxes plus padding and margins, fits inside 700px box. Using overflow: auto to make the containing box realize that there's content inside (even though it's floated).