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

views:

602

answers:

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

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?

+2 A:

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.

Traingamer 2009-04-23 18:53:56

If it cannot be done, then it's impossible to create layouts with pure CSS as a replacement for the old table method. Why is there so much talk about using CSS for layouts when clearly the specification does not allow it?

Core Xii 2009-04-23 19:00:59

well, CSS is getting there, and if it wasn't for internet explorer we could all be using CSS3 now, which allows you to do all the designs reliant on features of tables. In the meantime, I think it's the responsibility of a good web designer to be aware of what can't be achieved with CSS, and to design something that works well but won't need tables... which does include most designs you can think of as CSS 2.1 is pretty good too. So, in summary, it's Microsoft's fault.

wheresrhys 2009-04-23 22:55:58

It's NOT impossible to create beautiful, useful, fluid layouts with pure CSS. Many of us do it all the time. It is not possible to do what you are asking without defining widths. That is a completely different argument.

Traingamer 2009-04-24 15:23:09

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.

Calvin 2009-04-23 19:41:43

You're not contributing at all. Blatantly obviously these are the simplest, reduced examples that reproduce the problem. Of course in reality I ran into this problem when designing a real, standards-compliant page.Also had you paid attention you'd realize my DESIRED result is apparently impossible to achieve with CSS alone with the current implementations. Traingamer offers a work-around compromise, not a solution.

Core Xii 2009-04-24 14:36:07

Not including a BODY tag breaks the layout even if you don't include doctype. That is why I mentioned it. And don't assume something is impossible just because you failed to come up with a solution: http://test.rottenrecords.com/test/

Calvin 2009-04-24 16:42:04

That's pretty good, thanks for trying, but as soon as you enclose all that inside another div, it breaks again (so it may be useful for the topmost base of a layout, but not any nested elements). Also it consumes all vertical space so it's impossible to add a header or footer to that.

Core Xii 2009-04-24 19:45:05

+1 A:

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.

Jethro Larson 2009-04-23 19:57:39

ansaurus

tags:

views:

answers:

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

related questions