[thelist] Easy float/footer issue help

Jonathan Snook jonathan.snook at gmail.com
Fri Jul 20 21:43:11 CDT 2007

On 7/20/07, John Allsopp <john at johnallsopp.co.uk> wrote:
> Take a look at this http://www.johnallsopp.co.uk/test2/test.php4
> The three tables are provided by a php routine, the idea being that I
> can create a page containing any mixture of those tables in different
> sizes and they will all lay out nicely together depending on the screen
> size, etc. So they should float within their 'left' div. That works
> fine. In fact, it all works fine in IE.
> My problem is that having floated those tables, in Firefox my containing
> div 'wholeBody' (green border) has shrunk to nothing, and the footer
> (pink background), which I want to be underneath the body, is now near
> the top of the page.

to get the footer to the bottom, just set it to "clear:both;"

to get either wholeBody or "left" (which has the green border from
what I can tell) to expand, you need to clear the float using any of
the following methods:

1) include an element before the closing tag with "clear:both"
2) use overflow:auto/hidden on the container and zoom:1 or some other
hasLayout-triggering switch for IE
3) use PIE's auto-clear [1]

[1] http://www.positioniseverything.net/easyclearing.html

That should get you to where you need.

More information about the thelist mailing list