R. Steven Rainwater wrote: >I'm trying to convert an expandable (I think you guys use the term >"fluid"?) table-based design to divs. One thing that's becoming a >problem for me is that some cells (now divs) contain fixed-size elements >such as images. > >When I shrink the browser window size, the table based design shrinks >down as small as possible but never smaller than the size of an image >with a given cell. Making the window too small simple forces the user to >scroll but the layout still holds together. > >The div based design, on the other hand, seems oblivious to the size of >the elements contained and divs will happily shrink so much that the >elements they're suppose to contain leak out onto other divs. So the >layout self-destructs at sufficiently small window sizes. > >Is there any way to prevent this? Any way to make a div not shrink >smaller than the elements it contains, while still allowing it to expand >as needed? > >
Yes. This is exactly what display: table-cell does. Minimal example: http://www.pixelsurge.com/experiment/display-table-cell.html However, IE doesn't currently support the table display properties. But, it by default will stop shrinking down a block when the content is too large. The trick, then, is getting it to stop dropping the subsequent columns when it does this auto expansion. You can do this with negative margins. Another minimal example: http://www.pixelsurge.com/experiment/negative_margins_2.html You could probably use the display: table-cell stuff in a main style sheet and the negative margins stuff in an IE-only sheet fed through conditional comments and get what you want. Another solution, of course, is to use min-width, if you know what size the large content is going to be and from that can figure out the minimum width of the entire layout. IE workarounds are once again necessary, however. Our wiki page lists some, but there are others (if anyone has one that needs to be added to the wiki page, please do so): http://css-discuss.incutio.com/?page=MinWidth Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
