Re: [WSG] Why DO floats not stretch their containers?
Andreas Boehmer wrote: Can you give an example of where standard-compliant browsers expand the outer container with a float as content? I believe Roger pointed to the almost perfect example: http://www.complexspiral.com/publications/containing-floats/ Myself, being a heavy user of floats, simply forgot to point to the obvious: floats will expand to contain floats, unless we fix the container's dimensions in such a way that the content-float overflow its container. - Standard compliant browsers will respect the dimensions first, and expand to contain other floats if allowed to. - IE/win will need some negative margins on the content-float, to reduce its actual dimensions, or dimensions set on the floating outer container will not be respected. Example: http://www.gunlaug.no/contents/wd_1_02_03.html regards Georg ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Why DO floats not stretch their containers?
I believe that it is because floated elements are removed from the document flow just like absolutely positioned elements are. So the rest of the elements on the page, including the containing element, literally can't see the floated element. If they can't see it, then they can't accommodate its height, width, or any other property of it. That's how I've always understood it, anyway. I'm sure someone will correct me if I'm wrong. :) Cheers, Seona. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of John Horner Sent: Friday, 11 February 2005 10:17 AM To: wsg@webstandardsgroup.org Subject: [WSG] Why DO floats not stretch their containers? This is more of a philosophical question than a technical question, but here's the background. As we probably all know: * floated elements too big for the enclosing element spill out * except on IE, where they stretch the enclosing element that's a bit simplified, but essentially correct, right? For instance, with this code: div style=width:300px;height:100px;border:1px solid black; DIV A div style=width:100px;height:300px;border:1px solid red;float:left; DIV B /div /div DIV B will overlap DIV A and continue down the page on its own unless you're in IE in which case A will stretch. My question is, *why* is the correct behaviour the first one? It takes a lot of people by surprise and they often see what IE does as the natural and obvious thing to do. I'm not trying to start a flame war, I really want to know! I looked at my copy of the O'Reilly Definitive Guide by Eric Meyer and it just says that it's the correct behaviour, although some browsers don't respect it. It doesn't offer a rationale. Have You Validated Your Code? John Horner(+612 / 02) 9333 3488 Senior Developer, ABC Online http://www.abc.net.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** __ ella for Spam Control has removed Spam messages and set aside Later for me You can use it too - and it's FREE! http://www.ellaforspam.com attachment: winmail.dat
Re: [WSG] Why DO floats not stretch their containers?
John Horner wrote: * floated elements too big for the enclosing element spill out * except on IE, where they stretch the enclosing element that's a bit simplified, but essentially correct, right? Right. For instance, with this code: div style=width:300px;height:100px;border:1px solid black; DIV A div style=width:100px;height:300px;border:1px solid red;float:left; DIV B /div /div DIV B will overlap DIV A and continue down the page on its own unless you're in IE in which case A will stretch. Why limit it to floats? The same will/should happen to non-floats also. My question is, *why* is the correct behaviour the first one? It takes a lot of people by surprise and they often see what IE does as the natural and obvious thing to do. - div A has dimensions and they should be respected, - no matter the size of the content: div B, - except in IE/win, where we need workarounds. A standard-compliant browser will let us choose if we want the container to expand, or not. No height, or min-height only, on div A, and it will behave as in IE/win across browserland. So, we are given alternatives. IE/win has only one alternative: expand containers until the content fits inside. Logical for a weak browser, but not much for a web designer. Workaround in IE/win: http://www.gunlaug.no/contents/wd_1_02_02.html ... do the calculations that IE/win don't master. regards Georg ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Why DO floats not stretch their containers?
John Horner wrote: * floated elements too big for the enclosing element spill out * except on IE, where they stretch the enclosing element that's a bit simplified, but essentially correct, right? My question is, *why* is the correct behaviour the first one? It takes a lot of people by surprise and they often see what IE does as the natural and obvious thing to do. - div A has dimensions and they should be respected, But even if you don't give Div A a set height it won't expand. - no matter the size of the content: div B, - except in IE/win, where we need workarounds. A standard-compliant browser will let us choose if we want the container to expand, or not. No height, or min-height only, on div A, and it will behave as in IE/win across browserland. Sorry, I can't test my statement here, so if I am wrong please correct me, but as far as I remember taking out the set height (or min-height) of Div B will reduce Div A to 0 height. Floating Div B has got a similar effect to giving position:absolute - Div A will ignore the existance of Div B. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Why DO floats not stretch their containers?
Yeah that's true, a float won't expand its container, I've got assloads of div class=clearbothnbsp;/div to get around this. On Thu, 10 Feb 2005 18:07:51 -0800, Andreas Boehmer [EMAIL PROTECTED] wrote: John Horner wrote: * floated elements too big for the enclosing element spill out * except on IE, where they stretch the enclosing element that's a bit simplified, but essentially correct, right? My question is, *why* is the correct behaviour the first one? It takes a lot of people by surprise and they often see what IE does as the natural and obvious thing to do. - div A has dimensions and they should be respected, But even if you don't give Div A a set height it won't expand. - no matter the size of the content: div B, - except in IE/win, where we need workarounds. A standard-compliant browser will let us choose if we want the container to expand, or not. No height, or min-height only, on div A, and it will behave as in IE/win across browserland. Sorry, I can't test my statement here, so if I am wrong please correct me, but as far as I remember taking out the set height (or min-height) of Div B will reduce Div A to 0 height. Floating Div B has got a similar effect to giving position:absolute - Div A will ignore the existance of Div B. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- So come and join us all you kids for lots of fun and laughter While Roger Ramjet and his men get all the crooks they're after [ Josh 'G-Funk' McDonald ] -- [ Pirion Systems, Brisbane] [ 07 3257 0490 ] -- [ 0437 221 380 ] -- [ http://www.gfunk007.com/ ] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Why DO floats not stretch their containers?
At 1:01 PM +1000 11/2/05, Josh McDonald wrote: I've got assloads of div class=clearbothnbsp;/div to get around this. It's not just you! Why is that the (in some quarters) recommended solution, rather than just the break tag, with appropriate CSS to make sure it clears? ...and already we're off-topic. Have You Validated Your Code? John Horner(+612 / 02) 9333 3488 Senior Developer, ABC Online http://www.abc.net.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Why DO floats not stretch their containers?
Josh McDonald wrote: Sorry, I can't test my statement here, so if I am wrong please correct me, but as far as I remember taking out the set height (or min-height) of Div B will reduce Div A to 0 height. Floating Div B has got a similar effect to giving position:absolute - Div A will ignore the existance of Div B. You're perfectly right, and I should have expanded my answer to the original question-- instead of the container. ;-) - whether the outer container expands with a float as content, or not, depends on what you define the container as. But that only goes in standard-compliant browsers. You can get what you want in all browsers but IE/win-- without any workarounds. Georg ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Why DO floats not stretch their containers?
Josh McDonald wrote: Sorry, I can't test my statement here, so if I am wrong please correct me, but as far as I remember taking out the set height (or min-height) of Div B will reduce Div A to 0 height. Floating Div B has got a similar effect to giving position:absolute - Div A will ignore the existance of Div B. You're perfectly right, and I should have expanded my answer to the original question-- instead of the container. ;-) - whether the outer container expands with a float as content, or not, depends on what you define the container as. But that only goes in standard-compliant browsers. Can you give an example of where standard-compliant browsers expand the outer container with a float as content? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Why DO floats not stretch their containers?
On 11 feb 2005, at 00.17, John Horner wrote: My question is, *why* is the correct behaviour the first one? It takes a lot of people by surprise and they often see what IE does as the natural and obvious thing to do. I'm not trying to start a flame war, I really want to know! Eric Meyer's Containing Floats article explains it pretty well: http://www.complexspiral.com/publications/containing-floats/ /Roger -- http://www.456bereastreet.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
