On 2/25/12 11:58 PM, David Thorp wrote: [...]
I have a number of<div> objects arranged in various positions: 1. A toolbar across the top that is the full width of the window (width:100%) and 30px in height. 2. A sidebar down the left hand side, that starts under the toolbar (so the top border of it is 30px down the page). It's 138 px wide. 3. Then a content area takes up the rest of the window. I want each of these objects to take up the full height and width of the window (wherever a height and width is not set), regardless of the size of the window, without ever going over the edges of the window. I will use the overflow property to generate scroll bars if the content within each of these objects is larger than the size of the window allows.
[...] For the layout, the second template on this page may work for you. The sidebar on that example is 30%, but the layout will also work with your fixed width. :) <http://www.ez-css.org/css_templates> For the height problem, look for "sticky footer" solutions. Here is a simple one: <http://onwebdev.blogspot.com/2011/03/css-sticky-footer.html> If you need the columns to have a colored background top to bottom, my favorite solution is the "fluid faux columns" from this page: <http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/> Like most CSS problems, there are many solutions, but some fit a particular page better than others. I believe it's always best to start from a page with representative content, marked up with Plain Old Semantic HTML. For me, that makes choosing the solution much easier. YMMV. HTH. -- Cordially, David ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
