Ben Rogers wrote: >>No, I think we actually agree, it's just that we're misunderstanding one >>another. I'd better explain what I'm talking about. Roll on ASCII art! > > > Sorry about the confusion. I wasn't referring to how the size of a box is > calculated in either the W3C box model or the pre-Internet Explorer 6 box > model. Nevertheless, that ASCII art was pretty impressive! > > I'm not sure that there is a specific term for what we're talking about. > Here's the situation though... > > When you specify a relative size (50%) for a block element in CSS, the size > is calculated based the total size of the containing block. If the container > is set to auto, then the size of the container is unknown until the > container has been completely rendered. In such situations, the relative > size is ignored, defaulting instead to auto. This means that you have to > know the size of all the box elements in the hierarchy to specify a relative > size on one. > > You can read more about this behavior here: > > http://www.quirksmode.org/css/100percheight.html > > "The spec says: 'If the height of the containing block is > not specified explicitly (i.e., it depends on content > height), the value is interpreted like "auto".' > > This means that if you do not define any height at all > for the containing block, a percentual height of any > contained block doesn't work: the block becomes once > again exactly as high as it needs to be. > > Even though this rule may in a few cases save the browser > work in calculating the correct heights of elements, I > still think that it is far too restrictive and it's > caused by bad thinking on the part of the standard makers > and the browser vendors. Counter-intuitive and > unnecessary rules like this one make our beautiful CSS > too hard to work with." > > Anyway, that's problem number one.
I read that, and I know that issue, but I can't fathom myself where you'd take the extra height from if this rule wasn't there: the parent's parent, and if so, how much would you take, and what would the extra height be calculated relative to. I think, regardless of the solution, somebody've been dissatisfied. > To further complicate things, relative > sizes are calculated based on the size of the containing block. This means > that you have to know the size and width of all the elements within the > containing block (all of the adjacent blocks) when specifying the relative > size of an element. > > For example, I've found that trying to approximate the following layout in > CSS is very difficult. <snip> > In addition, each element has (or can have) it's own background color > specified at the element level. Mostly, I just included the background > colors to highlight the fact that each element lines up with one another > regardless in the different content sizes (which I'm artificially > controlling with the divs). Went up to my retreat deep in the Ox Mountains and meditated on a solution. Then, just as it came to me in a flash of blinding light, I remembered somebody'd already solved this particular problem before: http://www.redmelon.net/tstme/3cols2/ >>The real problem is that CSS needs a way of saying "if my parent has any >>free space, give that to me". "auto" means "give me just what I mean", >>"100%" means "make me fill my parent", but what we need is a "remaining" >>height, so if you specified: > > Heh, I thought that's what this entire thread has been about. I'm not sure > where the IE vs. W3C box model came from, but the whole point I've been > trying to make is that you can't specify the size of a block relative to the > available content area. Because Isaac was complaining about the box model, and I was trying to tell him that his problems weren't with the box model. >><div style="height:100px"> >><div style="height:remaining">Blah!</div> >><div style="height:remaining">Blah!</div> >></div> > > I don't think it should be implemented this way because I want to be able to > specify percentages of the "remaining" content area. If, in HTML, I > specified width="50%" on a table, it would take 50% of the "remaining" area > or what I've been referring to as the "available content area". Ah, but I was only giving the simplest implementation. In addition, you might do something like this: <div style="height:remaining"> <div style="height:remaining(2)">Blah!</div> <div style="height:remaining(5)">Blah!</div> </div> In this case, the outer div would expand to take up as much of the remaining height as it could, with the first child taking up 2 units (2/7) of it's space (the parent having 2 + 5 = 7 units), and the second taking 5. "remaining" means the same thing as "remaining(1)", if you haven't already guessed. This isn't as redundant as it sounds. You see, you can consider it a "softer" version of the percentages. Whereas 100% and 50% are just that, the "remaining" value just gives you the remaining space if it can. Example: + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Special thanks to the CF Community Suite Silver Sponsor - RUWebby http://www.ruwebby.com Message: http://www.houseoffusion.com/lists.cfm/link=i:4:188495 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4 Donations & Support: http://www.houseoffusion.com/tiny.cfm/54