Le 28 nov. 2012 à 09:28, Kyle Sessions <[email protected]> a écrit :
> My markup essentially follows this structure: > > <div id="container"> > <div id="sidebar"> ... </div> > <div id="content"> ... </div> > </div> > > On the desktop version, it's all fine. #sidebar is floated right, #content > is floated left, everything looks good. On the mobile version, I've > disabled floating entirely, but I'd like to display #content above > #sidebar, which is why I went down the route of table display. I figured I > could give display: table-footer-group; to #sidebar, and give display: > table-row; to #content. Or alternatively, #content can be > table-header-group and #sidebar can be table-row. But #content is what I > want to style with border and border-radius. In my schemes, #container > would get the implicit display:table, but I don't want to style #container > at all. You suggested giving display:table to #content, but as far as I > understand, that would do nothing to display it above, instead of below, > #sidebar. Am I missing something? Is it just not possible to do what I'm > trying to do? Ah, I understand what you're trying. What about setting #content to display: table-cell ? And the parent (#container) to display: table; table-layout: fixed Example: http://dev.l-c-n.com/_temp/kyle.html That won't completely fix the problem of long-unbreakable content nodes, they'll of course still overflow their parent box; but those parent boxes will no longer expand. The whole thing feels a bit like a hack though. Better would be to have #content first in the source order, but possibly you can't change that. Philippe -- Philippe Wittenbergh http://l-c-n.com ______________________________________________________________________ css-discuss [[email protected]] 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/
