Previous Message
Next Message

Using clearing elements to prevent margin collapse

Sent by Philippe Wittenbergh on 21 July 2004 18:06


On Jul 20, 2004, at 6:46 am, Bruno Fassino wrote:

> Philippe Wittenbergh wrote:
>
>> I moved all test files mentioned in this thread to a permanent
>> location, starting from:
>> <http://dev.l-c-n.com/margin_collapse/>
>> and linked from there
>
> First of all, thanks to you and to Michael Ryznar for this interesting
> discussion.
> I agree on all the conclusions. But still have some perplexity on one 
> of the
> test cases.
> This is test 3 of your first page. You explicitly assert that the 
> vertical
> distance between float B and the pink div should _not_ be 50px.  So 
> you seem
> to agree with Mozilla that, in case of a empty clearing div, lets the 
> margin
> of a following div to slide through the clear, collapsing with the 
> clearance
> above the clear. If this your interpretation?  I'm not convinced this
> behaviour is correct according to the spec, at least the 2.1, but I'm 
> not
> sure.
> Morover in this same case if you check the position of the clear with 
> the
> Mozilla DOM Inspector, it seems to be erroneously located _before_ the 
> first
> float. Don't know if this is significant.
> Opera 7 has shown other problems here, so it is probably not so 
> reliable,
> but Safari seems to display a 50px space here. What do you think?

Hmm, some doubts are creeping in, (and I definitively should read the 
specs again, but hold on a moment, long days short nights). We are 
talking about test 3
<http://dev.l-c-n.com/margin_collapse/index.php>, Ok ?
Here we have an empty div: <div class="clear"></div>. It is my 
understanding that such a div should not take up any space, and should 
not be taken into the count for the computed values of the margins. In 
this case, the only margin values that matter are the ones for the 
floated div and the non-floated div.
On my Mac Safari, IE mac and Mozilla 1.8a2 all seem to agree, 
displaying a distance of 25px between the floated div and the 
non-floated div. For the sake of exercise, I made another test file
<http://dev.l-c-n.com/margin_collapse/test_emptydivs.php>
where I put 10 such empty divs in a row. All 3 browsers still agree 
with each other. A screen shot is included. (and all 3 browsers have 
the same default font-size for the character set in use: 16px. Window 
size is about the same for all browsers: 950px.)

The positioning of those divs according to the DOM Inspector is only 
slightly puzzling: x:33px (that is OK) and y:217px, before the first 
floated div. But then, it does have 0px margins, and within the clear 
model, I think it makes sense : extending the top-margin to clear all 
floats in the stack. The (red) blinking shown by the DOM Inspector is 
the marginbox. (I wish I had a DOM Inspector for Safari, javascript 
might compensate for this - hmm Dashboard).

Philippe (enjoying this little discussion).
>
---/---
Philippe Wittenbergh
now live : <http://emps.l-c-n.com/>
code | design | web projects : <http://www.l-c-n.com/>
IE5 Mac bugs and oddities : <http://www.l-c-n.com/IE5tests/>

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: