Paul Novitski wrote: > This is likely one of those Gordian knots of CSS: how to combine > percentages and ems in the same layout.
It can't be done, but that doesn't mean your _problem_ can't be solved with regular CSS. Some browsers may be a bit weak though - IE6 being one of them. > I want to style a block that fills the vertical space of the > viewport, minus the 2ems taken up by the header. How to express 100% > - 2em in CSS? > http://juniperwebcraft.com/test/PercentMinusEmsProblem.html > Because my content block will contain a Flash object that will expand > to the dimensions of its container, I need the container to truly > begin at the bottom of the header. The solution is to forget the percentage-height on #content, and focus on the window-size - or rather its edges - instead, using absolute positioning. The tested solution below will give you a container that starts below the header, and auto-adjusts to window-height in all CSS-capable browsers. HTML: your example-page - unchanged source-code. CSS: #header { height: 2em; width: 70%; margin: 0 auto; padding: 0 1em; background-color: #F0F; } #content { position: absolute; width: 40em; padding: 0 1em; background-color: #FF0; top: 2em; bottom: 0; } Opera and Firefox do just fine. IE6 needs help (use an expression or something), since it can't position relative to opposite edges. Don't know about IE7, and can't check. regards Georg -- http://www.gunlaug.no ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
