Sent by Zoe M. Gillenwater on 14 February 2007 20:08
I've been playing around with various negative margin layout techniques
this afternoon, not because I don't like the one I typically use but
because I like to see what else is out there every once in a while. I
found a negative margin technique that differed from both my method and
the famous Ryan Brill method, and it involves giving the sidebar a -100%
margin in the same direction it's floated. Here are two instances of it:
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/
http://blog.html.it/layoutgala/LayoutGala13.html
However, my test for negative margin layouts is always putting a big
picture in the fluid column and seeing how the various browsers deal
with having the browser window sized down to the point that the image
overflows. Basically, I'm trying to see if IE will drop a column or
produce a horizontal scrollbar.
Curiously, when I applied the big-image-test to this new negative margin
technique, it resulted in the left sidebar moving around when the window
is narrowed in IE, both 7 and 6 (don't care about older versions right
now). Here's the exact same Dynamic Drive layout, but with a big image
added and background colors:
http://www.pixelsurge.com/experiment/negative_margins_3-dd.html
I know why IE is doing this: it expands the contentwrapper div instead
of letting the image overflow. The -100% margin is based on the width of
contentwrapper, so when contentwrapper is bigger than the window, the
left sidebar is no longer placed against the left edge of the window.
You can emulate this in Firefox and other good browsers by giving
contentwrapper a min-width and decreasing past it.
What I'm interested in, then, is not why it happens but if there is any
way to stop it (short of using overflow: hidden, which obviously works
but kills the needed scrollbars). Like I said, I'm just playing around,
so this is not urgent, but I'm curious. I've tried setting position:
relative on various divs, giving contentcolumn "layout" (the others
already have layout), and messing with margins. Haven't come up with
anything, and I don't think there is a fix, but I'm happy to be proven
wrong.
Speaking of being proven wrong ;-), Georg, do you have an index on your
site indicating what each of your layout pages is demonstrating? I'd
love to take a closer look at your preferred negative margin layout
technique.
Thanks,
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
