Re: [css-d] IE6/7 (standards-mode) dynamic width divs (using percentages and float:left) seem to spill when = 100%?
Michael Park wrote: Basically, my intention is to create dynamic widths, evenly divided amongst several columns totalling up to 100% of the containing div (yes, this is more or less doable with tables, but I'm trying to determine why this is so troublesome with divs). When trying to make floats with percentage-width declared line up flawless in IE, you have to counteract IE's calculation-errors one way or another. 50% + 50% isn't always exactly 100% ... you can expect 100% +/-1px, which of course makes the line-up quite unstable. With line-ups like yours the easiest solution is to pull in the backside-margin on the last float, so the actual width becomes less than the visual width... http://www.gunlaug.no/tos/alien/mp/test1.htm That'll provide IE with some invisible bug-space for its calculation-errors, and stability is assured. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] 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] IE6/7 (standards-mode) dynamic width divs (using percentages and float:left) seem to spill when = 100%?
50% + 50% isn't always exactly 100% ... you can expect 100% +/-1px,
Yup, that's why I thought maybe one of the ('overflow', 'margin',
'padding', 'border') css properties would do the trick. I guess not in
this case.
With line-ups like yours the easiest solution is to pull in the
backside-margin on the last float, so the actual width becomes less than
the visual width...
Aha, so that's the trick. Interesting, I wonder why the 'overflow'
property doesn't come into play here though.. At any rate, many thanks
for that clear and succinct explanation. That looks like the
work-around I've been looking for.
Thanks again Georg!
__
css-discuss [EMAIL PROTECTED]
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] IE6/7 (standards-mode) dynamic width divs (using percentages and float:left) seem to spill when = 100%?
Michael Park wrote: With line-ups like yours the easiest solution is to pull in the backside-margin on the last float, so the actual width becomes less than the visual width... Aha, so that's the trick. Interesting, I wonder why the 'overflow' property doesn't come into play here though.. IE doesn't treat 'overflow' correctly in the first place, and dimensions are miscalculated and float dropped before it looks at 'overflow' anyway. At any rate, many thanks for that clear and succinct explanation. That looks like the work-around I've been looking for. Pulling and pushing of margins on floats can make all browsers render the most complex and width-confusing constructions perfectly stable. Nothing has to be what it looks like when dealing with floats. I've tried to explain this in more depth here... http://www.gunlaug.no/contents/wd_additions_26.html ...and included as many links to examples and relevant internal and external articles as I could think of. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] 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] IE6/7 (standards-mode) dynamic width divs (using percentages and float:left) seem to spill when = 100%?
Michael Park wrote: Basically, my intention is to create dynamic widths, evenly divided amongst several columns totalling up to 100% of the containing div (yes, this is more or less doable with tables, but I'm trying to determine why this is so troublesome with divs). Georg wrote: With line-ups like yours the easiest solution is to pull in the backside-margin on the last float, so the actual width becomes less than the visual width... Wouldn't setting each div to a width of 49%, floated left for the first then floated right for the second also be a reliable cross- browser solution? -colleen __ css-discuss [EMAIL PROTECTED] 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] IE6/7 (standards-mode) dynamic width divs (using percentages and float:left) seem to spill when = 100%?
colleen sullivan leh wrote: Wouldn't setting each div to a width of 49%, floated left for the first then floated right for the second also be a reliable cross- browser solution? Yes, but that would leave a 2% gap between the floats. In some cases that's fine, in others not. As long as we're using floats: if one wants a gap-free line-up, or there are to be more than two floats dividing the available width, then floating them all in the same direction and pull in the backside-margin on the last one to make them add up slightly to short, is most reliable. All browsers understand this method. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] 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] IE6/7 (standards-mode) dynamic width divs (using percentages and float:left) seem to spill when = 100%?
I've tried to explain this in more depth here... http://www.gunlaug.no/contents/wd_additions_26.html ...and included as many links to examples and relevant internal and external articles as I could think of. Very cool, thanks again for your help with this Georg. --Mike __ css-discuss [EMAIL PROTECTED] 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/
