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/
[css-d] IE6/7 (standards-mode) dynamic width divs (using percentages and float:left) seem to spill when = 100%?
Hi there, I've been reading quite a bit about the various IE box model float-related work-arounds, but I haven't encountered anything yet to my knowledge that addresses or explains the issue that I'm seeing with IE6/7 (thankfully, IE5.x is old enough to be out of the picture for this project). 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). Here's the simplest example I could think of: ... div id=x div id=x_1part1/div div id=x_2part2/div /div ... http://emparq.com/scratch/test1.html Note that: - the width of parent div is unspecified (to allow resizing) - each child div (containing the text 'part1' and 'part2') * gets 50% of the width (thus totalling 100%) * floated to the left ...when resizing the browser window in IE6/7, sometimes 'part 2' will apparently exceed the container width, and spill over into the next row (placed under 'part 1'). This looks like something float or box-model-related, as quirks-mode doesn't seem to suffer this problem: (note: only the DOCTYPE directive was removed) http://emparq.com/scratch/test0.html ...and while that's all well and good, quirks-mode isn't really a viable option. Moving on, I tried removing the 'width' and 'float' css properties from the 2nd child div (the one containing the text 'part2') to let it consume the remainder of the parent's width: http://emparq.com/scratch/test2.html ...which does succeed at rendering how I wanted. But really, what I'm trying to understand is why floated divs with widths totalling up to 100% causes spillover? And is there a way to prevent that (perhaps using some obscure combination of css properties?), while leaving the 'float' and 'width' properties intact? Some other attempts: (that didn't correct the behavior): - setting 'overflow:visible' - setting 'margin', 'padding', and 'border' to 0 on child divs - 'zoom:1' (I don't think 'hasLayout' should be an issue anyways, since I'm already using width?) Could anyone help enlighten me on what's going on with this behavior, and if there's a better approach to evenly-divided-yet-dynamically-resizing-width divs than what I've got in 'test2.html'? Thanks. --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/
