Wonderbaby Designs wrote: > First, the layout works great if the center column is the longest, as this > example shows http://www.wonderbabydesigns.com/testing/center.htm , but, > when the left or right columns are longest, like in these examples > http://www.wonderbabydesigns.com/testing/left.htm and > http://www.wonderbabydesigns.com/testing/right.htm, the backgrounds don't > match up properly and some content runs off the bottom. > > Because the actual site has nested menus in the left and right columns that > can get much longer than the center content, I need all the columns to be of > equal height so that it stays looking pretty. I've tried adding negative > bottom margins/padding to the center and/or left column but that hasn't > worked. Any ideas how to achieve this?? I have a couple extra wrappers in > there that came from the original layout here > http://alistapart.com/articles/negativemargins, that used them to add in > small background images to create the illusion of equal-height columns, but > that won't work with my large gradient background images. I left the > wrappers there in case they will help with this problem. >
Sure, you can make it work. Create one image that is a strip of the tan and purple that makes up the middle portion of the page. Add this as a background image on the outermost wrapper that tiles downward. Create another image that is your bottom gradient and apply it as a non-repeating background image on the next wrapper nested in, pinned to the bottom. This background will layer on top of the previous background image seamlessly, and as long as both wrappers have a float containment method applied to contain all three columns, you'll be golden. Finally, for the top gradient, just apply this as a background image on your header div. > And, second, I would like to change the source order to have the > contentColumn first but I can't get everything floating back in the right > places when I change it. What do I need to do to make this work?? > The negative margins article that you described should help you do this. Follow it through step by step and you'll get it. I use a different method of negative margins that allows you to stick large content in the middle content and not have IE do its float drop thing. Here's a simplified example: http://www.pixelsurge.com/experiment/negative_margins_2.html Here are the articles describing how to build it fully, including with three columns: http://www.communitymx.com/abstract.cfm?cid=E9A76 http://www.communitymx.com/abstract.cfm?cid=CE08C http://www.communitymx.com/abstract.cfm?cid=bb650 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 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/
