CSS floats with unknown widths don't wrap whitespace with doctype

Question

Two divs, floated left, of unknown width. One of them has more content than fits the page, so it moves below the first (except in IE):

http://corexii.com/floatproblem/float.html

Add display:inline-table; and the big one wraps its content (consistently across browsers):

http://corexii.com/floatproblem/table.html

But introduce a doctype (not just strict, ANY doctype) and it doesn't anymore in Firefox:

http://corexii.com/floatproblem/doctype.html

How do I get the right div to wrap its content while using a doctype at the same time, reliably across browsers?

Answer 1

How do I get the right div to wrap its content while using a doctype at the same time, reliably across browsers?

Without defining widths, you cannot. I'd recommend percentage widths in this case, but it's up to you.

The default width for a div is 100% of its container (in this case the page). The first div will end up it's actual size unless you size the page to be smaller that its inherent width. Expecting consistency accross browsers without a full and valid doctype is simply an exercise in futility.

Answer 2

CSS can't quite do everything that table based layouts can. For one, dynamic width layouts are much more complicated. Table-less layouts are still preferable for 98% of cases, but if you really need this kind of dynamic width layout you might have to use a table.

Inconsistent widths, if not carefully proportioned, are not very good from a aesthetic standpoint so you may be fixing the wrong problem.

Answer 3

You could start by including a BODY element.

Traingamer has given you an explanation of Firefox's behavior and what needs to be done to get your desired result. You might listen to him instead of going off on a tangent about CSS being impossible to create layouts with.

Don't blame CSS for problems that you are introducing by not adhering to correct web specifications.