User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0 Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0 <div style="width:100px;height:100px;overflow:auto"> A lot stuff here .... </div> works as expected: a 100x100px^2 div which displays a scrollbar on the right if the content is bigger than the available space. <div style="width:100px;height:100px;overflow:auto;display:table-cell;vertical-align:top"> A lot stuff here... </div> does break the size fixation and expands the box as appropriate for the containing content. What do I like to achieve? If the dynamic content does not use the complete available area the content should be centered like in a table cell. If it uses the complete area, there should be scrollbars to display all of it. I know vertical-align means the "outer" alignment of an element, rather than the alignment of child items, but since the content I'm passing into the div can be anything I can't apply <childitem style="vertical-align:top">...</childitem> to it. Reproducible: Always
Assignee: firefox → nobody
Component: General → Layout: Block and Inline
Product: Firefox → Core
QA Contact: general → layout.block-and-inline
Version: unspecified → Trunk
> does break the size fixation and expands the box as appropriate for > the containing content. Table cells do not allow overflow in CSS in the "auto" table layout model. See http://www.w3.org/TR/CSS21/tables.html#auto-table-layout step 1 and http://www.w3.org/TR/CSS21/tables.html#height-layout paragraph 3. So the rendering is correct given that CSS.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 13 years ago
Resolution: --- → INVALID
So, since table-layout:fixed is not allowed/ not recognized in a <div> (I just tested that), there is no "legal" way of doing what I like to achieve? Damn... too bad. Is display:table-cell for anything useful either? Regards, Thomas.
table-layout applies to display:table boxes. You could use display:table on the div, and see how far that takes you. I don't follow what you're trying to get out of this (eg, where does centering come in?), so....
display:table does not help in my case. Again, what I like to achieve: I have a fixed-size box (e.g. 200x200 px^2) in which dynamic content, which comes from some CGI, is placed (text, pictures, whatever). Now, if the content's total rendered height is smaller than the height of the box (200px), I like to have this content vertically centered. If the content is too big for the 200px I like to see scrollbars on the left just as normal for the overflow behaviour. I could always "hack" a one-cell table inside the div which scales 100% height and vertically centers all the content, but I thought tables are disregarded for layout things...
> I like to have this content vertically centered. Ah, ok. You can't really do this in a reasonable way in CSS at the moment (as of CSS2.1).
> I thought tables are disregarded for layout things... Using HTML tables for layout is bad -- however, using CSS tables is fine (CSS is all about layout).
Created attachment 270943 [details] testcase Boris, is this testcase the same issue as described by the reporter? I mean having overflow: scroll applied to the cell should have the same effect as having this style applied to a DIV inside the cell, which is not the case. http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow says 'overflow' should also work with table cells.
> Boris, is this testcase the same issue as described by the reporter? No idea. I'd suggest filing a new bug rather than commenting in this old one... cc me on that new bug? I agree that in your testcase some of the cells should be scrollable and aren't at the moment.
You need to log in before you can comment on or make changes to this bug.