Thanks, Philippe!
On Tue, Nov 27, 2012 at 4:15 PM, Philippe Wittenbergh <e...@l-c-n.com>wrote:
>
> Le 28 nov. 2012 à 08:17, Kyle Sessions <ksessi...@bepress.com> a écrit :
>
> > I have a div in my project that I had styled with rounded corners
> > (border-radius: 4px; border: 1px solid #aaa;). Then, later on, for
> > layout/display purposes, I gave that div display: table-row-group;. (I've
> > actually tried several table-related display options, with the same
> > result.) But as soon as I give it that, I lose my rounded corners and my
> > border. I suspect that border and border-radius probably only apply to
> > block elements, and any table-related display option means it's no longer
> > block display? Any ideas what I can do about this?
>
> Setting the element to display: table would allow the border and
> border-radius to apply. display: table-row-group is equivalent to <tbody>
> and only allows limited styling due to how the table-painting model works.
> Note also that the browser will generate a (anonymous) display:table parent
> element and (anonymous) display:table-row and display:table-cell elements.
> [*]
>
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?
>
> >
> > Incidentally, giving it a table-related display also broke the width. I'm
> > working on a mobile project, and when this div has a table-related
> display
> > option, the content inside the div forces it to be too wide for my mobile
> > browser, where, as a block-level element, it fits.
>
> That it to be expected, depending on the contents of that element, the
> same as if it was a real table. You might try
> div {
> display: table;
> width: 100%;
> table-layout: fixed;
> }
>
>
> [*] http://www.w3.org/TR/CSS21/tables.html
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com
>
>
>
>
> ______________________________________________________________________
> 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/
>
--
Kyle G Sessions
Berkeley Electronic Press
ksessi...@bepress.com
510-665-1200 + 128
www.bepress.com
bepress: the frontier of scholarly publishing since 1999
Check out IR success stories on the DC Telegraph at
http://blog.digitalcommons.bepress.com
______________________________________________________________________
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/
