Joe Blow wrote: >I was trying to research an alternative to using tables for a 3X3 layout grid. >As an example, I've posted this page: http://earthday.ca/temp/index.html. The >middle-center slice (r3_c2.jpg) is where the content would go, and it should >expand vertically to accomodate any height of content. Therefore, r3_c1.jpg >and r3_c3.jpg slices should scale vertically as well. > >I've looked at 3-column CSS alternatives to tables (most notably on glish), >but they don't accomodate a top and bottom row, which causes mess-ups: at >least in IE, there's padding below the images in these rows that leave an ugly >space -- I need all the images to butt up seamlessly against each other in all >browsers for a design like this to work. I can't seem to use float to remedy >the situation either. > >I can't find a solution in CSS. Can any of you suggest one? Thanks for the >help. > >
Joe (though I'm guessing that's not your real name...), The key to creating this layout is to stop thinking in terms of tables. Banish them from your mind. Think in terms of the logical divisions of your page. Mockup the content that will go inside the shell you have shown us. Take a look at that content. Maybe you will see that it's grouped like this: name of site/branding main navigation menu primary content secondary content copyright and credits info For each of these areas of content, create a div. <div id="branding"> <div id="main-nav"> <div id="main-content"> <div id="secondary-content"> <div id="footer"> Throw your content in each of those areas with the proper semantic markup. Your page won't look like anything yet, but that's ok -- you're working on structure. Now, in the interest of easier CSS styling, add a few extra divs. <div id="wrap"> <div id="branding"></div> <div id="container"> <div id="main-nav"></div> <div id="main-content"></div> <div id="secondary-content"></div> </div> <div id="footer"></div> </div> Now you can set the width of #wrap (I assume this is a fixed-width design, based on your header graphic), which will determine the width of all the nested divs that hold your content. Now all you need are three graphic slices: the header one, plopped into the #branding div (recommended) or set as its background; the content area one, set as a repeat-y background on #container; and the footer one, set as the background on #footer. Then float the three divs inside #container, add a float containment method, and you're done with the structure. Now go ahead and style the content inside your divs. 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/