[...]
On 2/17/15 1:54 PM, Sara Haradhvala wrote:
Am wondering - is it possible to have a responsive layout that has a
main column and an optional sidebar where text from the main column
flows under the sidebar - but where the sidebar drops under the main
column in mobile view? Not using flexbox (need to support IE8 and
IE9). Is JS necessary?
On Feb 17, 2015, at 6:43 PM, David Hucklesby <huckle...@gmail.com>
wrote:
Float the sidebar and give it a percent width, with that width set to
100% on narrow windows (via media query) perhaps?
On 2/17/15 4:50 PM, Sara Haradhvala wrote:
doesn't that require the sidebar div to come first in the HTML? If so,
then on mobile, it will also come first. Or is there another option?
You are right of course. To move the sidebar below the main content on
narrow screens, see if this code works for you:
<http://codepen.io/hucklesby/pen/VYXWmM>
On 2/20/15 7:48 AM, Sara Haradhvala wrote:
Hi David,
Thanks - that's an interesting solution - I would never have thought of
using table-caption for this! For the moment, I ended up using flexbox -
only on mobile so IE9 didn't really matter. It seems good, but may have
issues on older androids (before 4.4) - if that turns out to be a problem for
us - I'll give this a shot.
Good thinking. The beauty of flexbox is that you can usually combine it with
other methods that work as fallback. Not only does the "display" value of the
parent use "flex" in browsers that understand it, but each child becomes a flex
item, no matter its assigned "display" value.
--
Cordially,
David
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
