- From: Giuseppe Bilotta <giuseppe.bilotta@gmail.com>
- Date: Thu, 28 Oct 2010 13:52:46 +0200
- To: WWW Style <www-style@w3.org>
[this might come as a repost, since my previous mail seems to have got stuck somewhere in the intertubes and is not appearing on the ML even after 12 hours, despite me being subscribed. sorry for the noise] Hello, I recently found myself in the following situation. I have a number (say, 4) boxes with a given maximum width (DIV with display:inline-block and max-width: 70ex). These boxes are all first-level children of another box (DIV with #id content), and I would like to achieve the following layout: as many inner boxes side by side as fit in the viewport, then another row of boxes, etc. The outer div would then shrink to fit its content and be centered. So my CSS for #content is something like: #content { display: inline-block; margin-left: auto; margin-right: auto; } plus some padding and a border. This works pretty well (i.e. gives the expected results) if the inner boxes all fit within the viewport. If they don't don't, however, what I get is two (or more) lines of boxes (which is ok), and #content expands to match its containing block (which is a div with display: block and as large as the viewport). This is, if I understand the current specifications correctly, the expected behavior, as the shrink-to-fit algorithm computes the width as min(max(minimum preferred width, available width), preferred width) where the preferred width is computed by only considering obligatory linebreaks. When the inner boxes can stay side-by-side, therefore, the width is the preferred width (no linebreaks) while otherwise the width is the available width (i.e. the whole viewport). Although in my specific case I could work around the issue with an extensive and boring list of media queries that relate the #content max-width with the ratio of the viewport width to the inner boxes max-width, I believe a better solution would be to have this done automatically by the layout engine. Therefore, I propose the following small change to the shrink to fit algorithm: the preferred width should be computed by considering not only the explicit linebreaks, but also the ones that would occur if the width matched the containing block width. The new algorithm would therefore be: (1) find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars (2) find the preferred width by formatting the content as if the width was set to the available width (3) set the width to that of the largest line (anonymous box?) in the formatted content I do of course realize that due to legacy it would not be possible to make this new algorithm the default one, but it should be possible to make it available with an appropriate specification (width: inner-fit ?) Could I have your opinion on this proposal? -- Giuseppe "Oblomov" Bilotta
Received on Thursday, 28 October 2010 11:53:34 UTC