Thanks Russ. Box-flex / flexible box does not yet appear to have much
browser support, so that rules that out for now.
Support for CSS3 columns will arrive in IE10 according to
http://www.findmebyip.com/litmus, but Windows XP users are stuck with IE8
and can't even get IE9.
Your solution using CSS tables works well, I may consider that. It just
shows though that despite all the good reasons for using CSS, it has until
now had limitations in its ability to provide the flexibility that we
require, and even to replace some of the things that we could do with the
all-powerful <table>.
There's also a part of me that thinks using floats for column layout is not
really the correct use of floats, just as tables was not correct, but we can
only work with what we've got.
Thanks,
Stephen
----- Original Message -----
From: "Russ Weakley" <r...@maxdesign.com.au>
To: <wsg@webstandardsgroup.org>
Sent: Thursday, November 03, 2011 8:21 PM
Subject: Re: [WSG] Wrapping text before float drop
Think of how two columns work in a table, when they have no specified
width. They adjust to the size of the content and the available width, and
wrap their content if the available width is reduced.
This should be easy in CSS, no?
The simple answer is that floats are not ideal in this situation.
There are three ways you
could solve this problem - but as Hassan mentions, they are best done
without using "float". All three solutions may present issues in older
versions of IE. Without knowing exactly what you are trying to achieve, it
is hard to recommend one of these solutions.
---------------------
Option 1 - display: table, display: table-row, display: table-cell
---------------------
<http://www.w3.org/TR/CSS2/visuren.html#display-prop>
For example, you could make the two containers operate like table cells. I
am not really a fan of this approach, but it would give you the behaviour
you are looking for.
<http://maxdesign.com.au/jobs/example-stevio/table.htm>
---------------------
Option 2 - columns
---------------------
<http://dev.w3.org/csswg/css3-multicol/>
---------------------
Option 3 - Flexible Box
---------------------
As Hassan mentioned, you could use the flexible box module as a solution
<http://dev.w3.org/csswg/css3-flexbox/>
Not sure if any of these help...
Russ
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
