-----Original Message----- From: Alan K. Gay [mailto:[EMAIL PROTECTED] Sent: Thursday, January 24, 2008 11:04 AM To: css-d@lists.css-discuss.org Subject: RE: [css-d] Two-column fluid layout
Kristin, I'm not versed in the hack you are using for min-width on IE6. I do observe that if I resize my browser while viewing the page, the nav section gets overlayed on the main text. Refreshing the screen resolves the problem, but not ideal. IE also supports a proprietary expression that will recalculate width based on port size using js in the style (in the form of width: expresssion (blah blah blah)), but it in my experience it's cumbersome to use, and while it recalculates dynamically as users resize their browser while viewing the page, I've seen it to causes IE to crash on occasions. The other choises are to design around the requirement or include a fixed width element (like a 1px high transparent image) that is uncompressible and therefore forces the horizontal scroll. All ugly choices. Your 1px red border problem is easier... You have content with a width of 100% and a 1px left border... So your total width is 100%+1px. Change your width to 99.5% or something like that and the red stripe disappears. You should also eliminate the right border on menu... It is unneeded if you want a 1px border between menu and content. An alternative that works in FF is to give content a left margin of -1px, though I don't know if that works in IE7. Finally, in FF, it appears the -170px margin on your elements is being subtracted from the width of the body, so FF thinks it's body is 760 when it is really 930. Setting min-width to 760-170=590 seems to solve your problem in FF. Alan K. Gay [EMAIL PROTECTED] BuyMetrics, Inc. Atlanta, GA -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Murphy, Kristen Anne Sent: Wednesday, January 23, 2008 5:06 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Two-column fluid layout Murphy, Kristen Anne wrote: > I'm trying to create a two-column, fluid layout using the method > described in this article: > http://www.alistapart.com/articles/multicolumnlayouts/ (In short, the > method involves creating the illusion of equal-height columns by > making a div with a wide left border and then floating another div > over that border.) I'm running into a few problems, to wit: Thanks for the responses on this. I took a step back and started with a clean stylesheet based on one from the ALA article (instead of my original stylesheet which had been reworked a million times), and it's working much better now. There are still a few problems with the width that I'm hoping someone can advise me on. In Firefox and IE7, I'm getting a horizontal scroll bar. There's also approximately 1px worth of the body (red) showing through on the far right of the page. I'm guessing the two are related. Also in Firefox and IE7, the min-width isn't working properly. It's supposed to be scalable down to 760px, but the white space between the film reel and the words "Individualized Major Program" isn't collapsing far enough. In IE6, the min-width is not working at all. As the browser window shrinks, the banner breaks and "Individualized Major Program" slides under the images. The relevant files are here: HTML: http://imp.purplelagoon.org/index.shtml CSS: http://imp.purplelagoon.org/css/imp.css Min-width rules for IE6: http://imp.purplelagoon.org/css/iestyle.css Thanks, Kristen [EMAIL PROTECTED] ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
