[css-d] Question about how to handle div height with floating children
The issue is when an image is set to float, the height of the graphic is not taken into account for the calculation of the div height. This is illustrated on page: http://www.xxaxxsoft.com/cssdiscuss/test.html I can hack my way around this by setting the height of the div explicitly. Or, I can also put something like div style=clear: left/div inside the parent div after the image. This seems to trigger the image's height being used to calculate the height of the div. But I would like to understand why this is happening and have some idea of the best practice for handling this issue. Any hints would be much appreciated. Regards, Claude Needham __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] Question about how to handle div height with floating children
--- On Fri, 3/19/10, Claude Needham gxx...@gmail.com wrote: The issue is when an image is set to float, the height of the graphic is not taken into account for the calculation of the div height. But I would like to understand why this is happening Here's my explanation: http://www.fiveminuteargument.com/float-container and have some idea of the best practice for handling this issue. I'm not sure if it's considered *best* practice, but a very common technique is to apply 'overflow: hidden' (or another non-default overflow value) to the container. - Bobby __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] Question about how to handle div height with floating children
The issue is when an image is set to float, the height of the graphic is not taken into account for the calculation of the div height. This is illustrated on page: http://www.xxaxxsoft.com/cssdiscuss/test.html I can hack my way around this by setting the height of the div explicitly. Or, I can also put something like div style=clear: left/div inside the parent div after the image. This seems to trigger the image's height being used to calculate the height of the div. But I would like to understand why this is happening and have some idea of the best practice for handling this issue. Any hints would be much appreciated. This may help: http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context. asp -- Regards, Thierry www.tjkdesign.com | articles and tutorials www.ez-css.org | ultra light CSS framework __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] Question about how to handle div height with floating children
Bobby: http://www.fiveminuteargument.com/float-container Thierry: http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.asp Thank you both for the explanations. I think I have a much better idea why this behavior is necessary as the default. And I have a better idea on how to handle it. I must say though, that Thierry's article reintroduced me to the hell in a can of worms known as cross-browser compatibility. Periodically I make resolutions (of the New Year's variety) to be more cross-browser compatible. Then I fall into blissful sleep forgetting about everything other than Firefox and IE7+. Now at least I have another resource when making fresh attempts to handle those other browsers properly. Thanks for the help. Much appreciated. Claude Needham __ css-discuss [cs...@lists.css-discuss.org] 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/
