On Tue, Apr 10, 2012 at 12:28 PM, David Hucklesby <huckle...@gmail.com> wrote: ... > Nice one, Vince. > > One small issue: The div.colimg (float) sitting beside div.coltxt (new > block formatting context) -- your second solution -- does not need the > 100px left margin. For some reason Webkit makes div.coltxt 100px too > short, and you end up with a 100px gap on the right. Remove margin-left > and Webkit agrees with Mozilla.
Thanks David. That's a good catch. That left margin is entirely unnecessary. I should've tested it in webkit. I think that margin was left over from an earlier attempt in which I had the left block (colimg) absolutely positioned. I think I understand why it's shorter than intended. Since I didn't set a width and it's not floating, div + margin should take up the width of the div.fourthbannertxt -100px for div.colimg... I think. What I don't get is why that gap is on the right instead of the left. I thought the margin would bump up against the right edge of the image inside of div.colimg. I know that margins ignore floating elements, but I thought it wouldn't ignore non-floating contents of floating elements. I was wrong ... The webkit developer tools shows the left edge of the div.coltxt (including margin) is at the left edge of div.fourthbannertxt, behind div.colimg, not at the right edge of the image like I would've expected. I definitely had a misconception here because Firebug also shows the left edge of the div.coltxt (including margin) at the left edge of div.fourthbannertxt... The margin of div.coltxt is ignoring div.colimg and its img in both Firefox and Webkit. hehe ... never stop learning :) -- Vince > -- > Cordially, > David ______________________________________________________________________ css-discuss [css-d@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/
