CSS columnar layout: where's "div:rest"?
Technical ·Friday February 27, 2009 @ 19:18 EST (link)
CSS layouts: If you want one div to use "the rest" of the parent containing block, one way is to divide it into two divs: one that floats (left or right as needed), and then the other one will use the rest of the area. If you need more divisions, don't add another div to the top-level parent: add it in the "remaining space" div. This allows specifying percent widths usefully (as a percentage of the containing block, not the whole page). It makes the "holy grail" three-column layout trivial, if that's what you want.
This, however, still has problems: the "rest" of the area still has the full width (apparently there's a margin hack that can be made to work, but I had no luck with it). A better way to go about it is to use two adjacent (no intervening whitespace!) display: inline-block elements (make sure to use vertical-align:top); they can be given percentage widths. My last issue is that I want to give my divider div a width of 3px, and its neighbor the rest of the space, but you can't say width: 100% - 3px (a width: rest would be even better; too bad auto doesn't do that). I'm working around it by using width: 99.5%, but it's a nasty hack. I still don't know of a way to require a div to use the rest of the space, which is unfortunate, as it would be trivial to implement.
