Wonderbaby Designs wrote: > I now have 2 layouts I'm working with - there's the one you posted > above which is based on the negative margins article on ALA, and I > have the one based on Skidoo with backgrounds added in now here > http://www.wonderbabydesigns.com/testing/final_test.htm
I like the negative-margins based layout better, but I guess that's just me :-) Is the source-code order as you like it? It looks like you're thinking "top-left towards bottom-right" - like in print, which may not arrange the content in the best order for the web. We usually apply that negative-margin layout with main content - the center column - first and the side columns further down in the source-code. Then we rearrange the visual appearance with CSS. No problems with your source-order though, if you like it that way. > They each seem to have their issues, and I'll be happy with whichever > one I can get to work. The ALA_3col has the simplest, cleanest code, > but the final_test layout seems to work best with the backgrounds. > Perhaps someone can tell me what it is that makes the final_test > backgrounds work and I can incorporate that into the ALA_3col > layout?? That's 'collapsing margins'[1] on the main content column - adding a gap above and below that column because the top and bottom margins from the paragraphs end up on the outside of the container-div. I contained those with a padding on that container-div. Other alternatives are not as cross-browser reliable as that one. > again, my design image > http://www.wonderbabydesigns.com/testing/design.jpg > > my neg.margin layout > http://www.wonderbabydesigns.com/testing/ALA_3col.htm Let us check if we're getting closer... <http://www.gunlaug.no/tos/alien/test_8510.html> ...before looking at, and trimming, the details. Rough CSS here... <http://www.gunlaug.no/tos/alien/ALA_3col.css> - One less background since the right column is on top of the main column, thus doesn't need its own background. Some limitations regarding length of columns here - which is the tallest, but you have a couple of extra wrappers that can be put to use if that becomes a problem. - Right column has a real border on its left edge, which I think lines up fine in most browsers. That column also has a padding/margin stretch at the bottom, which will make it tall enough regardless of content. - The copyright text on the left and photo-div on the right is moved in the source-code and floated up from below. Paddings on side-columns prevents overlap. - I corrected the 'min/max width' expression so it takes the body-margins into account and suits IE6. This layout can now take some stress in most browsers, so it should be a good starting-point. regards Georg [1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins -- 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/
