The short answer is no, that's not possible. Granted, you could do some complex math and set up max and min widths for the containing element, but that's not universally supported and...well, it's just overly complicated.
If you want to use percentage margins to separate the columns, consider floating them to position instead. This will require an extra container div to hold the three columns, as your current markup would have them floating up to the top of your header. Floating isn't the only option: you could also wrap those columns in a div, center the containing div, and use relative positioning to place the columns within the containing div. It all depends on the final look you want. (If you need more specific help on this, I'd be glad to consult off list.) Matt On 1/12/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote: > > Wow, what an easy fix. Thanks. > > Another question: how to think about px versus percentage when setting up > the margins for these boxes on the galleries page? I'd like to use > percentages to accommodate different size viewports, but if my boxes are > px-sized, is that possible? > > Before CSS, I used to think of myself as a very logical person ... > > Beth > > > -----Original Message----- > From: [EMAIL PROTECTED] > [mailto:[EMAIL PROTECTED] On Behalf Of Matt Dawson > Sent: Friday, January 12, 2007 5:07 PM > To: [EMAIL PROTECTED] > Cc: css-d@lists.css-discuss.org > Subject: Re: [css-d] Page check for newbite > > > Yeah, it applies on that page too. > > Fixed position can be a bit tricky for that very reason. Floats will push > each other out of the way and never overwrite each other, but the same > can't > be said for positioned elements. Any time you use positioning, you need to > test (or at least think through) as many conceivable scenarios as > possible. > > Matt > > On 1/12/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote: > > > > Thanks so much. (The specific reason I set it up the way I originally > had > > it was ignorance :) although I don't have that excuse, really, after > going > > through Eric Meyer's really excellent book *CSS Web Site Design*.) > > > > I guess that same solution would apply to my wrong-headed layout here?: > > http://www.callibeth.com/galleries.htm > > > > Beth > > > > > > -----Original Message----- > > From: [EMAIL PROTECTED] > > [mailto:[EMAIL PROTECTED] On Behalf Of Matt Dawson > > Sent: Friday, January 12, 2007 4:36 PM > > To: [EMAIL PROTECTED]; css-d@lists.css-discuss.org > > Subject: Re: [css-d] Page check for newbite > > > > > > For starters, it's a very attractive first css layout. Congrats! > > > > I noticed one thing right away- and I don't think it has anything to do > > with > > the Safari problem you mention. > > > > Your layout scheme for the three columns (defined in index.css) is a > > little > > wonky. If I resize the size of my browser window, the left two > > boxes/columns > > (Calligraphy & Book Arts and Art Prints for Sale) stay relatively still, > > while the Weddings & Celebrations box/column, moves wildly about. The > > reason > > for this can be found in this code: > > > > #col1 { > > width: 150px; > > left: 330px; > > background-image: url(../site_images/A.jpg); > > } > > #col2 { > > width: 150px; > > left: 555px; > > background-image: url(../site_images/B.jpg); > > } > > #col3 { > > width: 150px; > > right: 330px; > > background-image: url(../site_images/C.jpg); > > } > > > > The problem is that third column is being position relative to the right > > side while the other two are relative to the left. What you end up with > is > > a > > scenario at certain browser window sizes where the third column obscures > > one > > or both of columns 1 and 2. > > > > Easy fix though, right? All you have to do is position col3 with the > left > > offset property. > > > > (Was there a specific reason you set it up the way you have it?) > > > > Matt > > > > On 1/12/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote: > > > > > > My first CSS website. And my first post (hope it's not a duplicate), > > > although I've been trying to follow and learn from the discussions for > > > several weeks. > > > > > > http://www.callibeth.com/index.htm > > > Although this page looks as I want it to in Firefox/PC and IE7/PC, I > > > understand that this page doesn't do well in Safari/MAC -- the first > and > > > third letter boxes fall below the viewport, and middle box doesn't > show > > up > > > at all. Any clues as to how to fix it? > > > > > > Any other advice appreciated. I'm afraid my CSS has midstream-project > > > spread. I'm not sure whether I should reference the CSS files. In case > > > yes: > > > http://www.callibeth.com/css/main.css > > > http://www.callibeth.com/css/index.css > > > > > > Regards, > > > > > > Beth Lee > > > Tallahasee, Florida > > > www.callibeth.com > > > callibeth.blogspot.com > > > ______________________________________________________________________ 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/
