Previous Message
Next Message

negative margined sidebar moving when window narrowed in IE

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/
Previous Message
Next Message

Message thread: