Floating divs overlap in Firefox with zoom

I am designing a simple two-column website with a full-width header and footer as follows.

#header{text-align: center;}

#sidebar{float: left; width: 20%;}

#content{float: right; width: 80%;}

#footer{clear:both;}

This works OK in both IE and Firefox at normal size; however, when I zoom in and the text becomes very large, IE retains the layout (the widths of #sidebar and #content expand and contract as I zoom in and out, because IE applies the percentages to the width of the page, which is dynamic), but in Firefox the sidebar text wraps into shorter lines and overlaps with the content (the widths of #sidebar and #content do not change as I zoom in or out, because Firefox applies the percentages to the width of the window, which is fixed). How can I make Firefox retain the proportions of #sidebar and #content relative to the page width (not the window width) as I zoom in and out, like IE does?

(Reducing the width of #sidebar or #content helps, but then the gap between them looks too wide at normal size.)

Also in #CSS _↴