 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / August 2007div ignoring container edges
Having a problem in Firefox, with something similar to: <div style="border: thin solid blue; min-height: 15em;"> <div style="border: thin solid red; height: 80%;"></div> </div> I was expecting the outer div to have a height of 15em, with ability to expand if needed, and the inner div to be 80% of its container. Instead, the inner div appears to stretch the outer div to 80% of the screen size. If I change the min-height to height, it appears as planned, but will not grow when content is added. Any suggestions as to what is going on, or alternatives? Thanks! > Having a problem in Firefox, with something similar to: > [quoted text clipped - 12 lines] > > Any suggestions as to what is going on, or alternatives? Change 'min-height' to 'height' and see what happens ;-)  SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com >> Having a problem in Firefox, with something similar to: >> [quoted text clipped - 14 lines] > > Change 'min-height' to 'height' and see what happens ;-) Thanks for your reply. This works in IE, but in Firefox, the div won't expand to fit any content that's added. Any other suggestions? > This works in IE, but in Firefox, the div won't expand to fit any > content that's added. > > Any other suggestions? Works for me, maybe we need to see the rest of the page, eh? SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com >>> Having a problem in Firefox, with something similar to: >>> [quoted text clipped - 19 lines] > This works in IE, but in Firefox, the div won't expand to fit any content > that's added. IE is getting it wrong. Firefox is correct. If you give a div a specific height then it will have that height. It should not expand. http://developer.mozilla.org/en/docs/Migrate_apps_from_Internet_Explorer_to_Mozi lla#CSS_overflow_differences SignatureRichard. > Having a problem in Firefox, with something similar to: > [quoted text clipped - 12 lines] > > Any suggestions as to what is going on, or alternatives? Will this do what you want it to? <div style="border: thin solid blue; min-height: 15em; position:relative;"> <div style="border: thin solid red; height: 80%; position:absolute;"></div> </div> SignatureGus >> Having a problem in Firefox, with something similar to: >> [quoted text clipped - 20 lines] > position:absolute;"></div> > </div> Yes, it does. Thanks! Any idea why Firefox acts the way it does in this situation? A bug maybe? > Any idea why Firefox acts the way it does in this situation? A bug maybe? No bug. Fx follows the Specs. The containing block for a positioned box is established by the nearest *positioned* ancestor (or, if none exists, the initial containing block). http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme http://www.w3.org/TR/CSS21/visudet.html#Computing_heights_and_margins I also encourage you to Google Groups for 'containing block' and read up on previous discussions. SignatureGus >> Any idea why Firefox acts the way it does in this situation? A bug maybe? > [quoted text clipped - 8 lines] > I also encourage you to Google Groups for 'containing block' and read up > on previous discussions. If this was the case, then wouldn't setting the outer div's position: relative satisfy this requirement? Why does the inner div have to be absolutely positioned also? As you've given me a way around this, I guess it doesn't really matter. Thanks for your help :) > If this was the case, then wouldn't setting the outer div's position: > relative satisfy this requirement? Why does the inner div have to be > absolutely positioned also? > > As you've given me a way around this, I guess it doesn't really matter. In case it does matter, the answer is in: <http://www.w3.org/TR/CSS21/visudet.html#min-max-heights> But you have to read and understand the convoluted writeup in Sections 9 and 10 of the Specifications. <http://www.w3.org/TR/CSS21/visuren.html> <http://www.w3.org/TR/CSS21/visudet.html> SignatureGus Good luck >> If this was the case, then wouldn't setting the outer div's position: >> relative satisfy this requirement? Why does the inner div have to be [quoted text clipped - 9 lines] ><http://www.w3.org/TR/CSS21/visuren.html> ><http://www.w3.org/TR/CSS21/visudet.html> Just to clarify that a bit, the key point is in 10.5: If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not ^^^^^^^^^^^^^^^^^^^^^^^ absolutely positioned, the value computes to 'auto'. ^^^^^^^^^^^^^^^^^^^^^ In the original example, <div id="A"> <div id="B"> Both A and B have static position and A is the containing block for B. But since A doesn't have an explicit height then the percentage height for B is ignored ("computes to 'auto'"). This is because A's height depends on the height of its contents (which consist of B), so asking for B's height to be a percentage of A's is circular. In Gus's version: <div id="A" style="position: relative"> <div id="B" style="position: absolute"> A is still the containing block for B (position: relative is needed to preserve that relationship) but in this case B _can_ be given a percentage height of A's computed height. This is because A's computed height depends on its normal flow descendents (i.e. the ones that aren't absolutely positioned). The height of A therefore does not depend on the height of B, as B _is_ absolutely positioned and so not a normal flow descendent. So there is no circularity, and the percentage height makes sense. > Having a problem in Firefox > Any suggestions as to what is going on, or alternatives? Post a URL if you don't want WAGs SignatureBerg |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.