Sent by Andy Budd on 24 November 2003 16:04
Hi Andrew,
I tried clearing left but it had no effect. The margin on the heading
is just to exaggerate what would happen when any element with default
margin is placed above the floated div. I could set all the bottom
margins of my <h>'s and <p>'s to zero and then set a margin on the
float, but it's a bit of a hack.
Andrew wrote:
> Fix is easy - move the margin to the float. Or only left clear, or only
> right clear the panel div.
>
> It doesn't matter if the float is 100% or less. The problem is the
> clear of
> the panel div. Clear only to one side and the problem vanishes.
>
> Explanation probably has to do with how the out-of-flow of the float in
> interpreted. The 40px margin is applied to the h1. The float respects
> the
> margin, properly. Since the next element is static, it 'ignores' the
> float
> while trying to flow around it. The clear:both forces the panel div
> below
> the float which it ignores having respected it. The two static
> elements need
> to be positioned 40px apart because of the margin-bottom value. The
> ignored
> but respected float is being interpreted as the content of the h1,
> hence the
> 40px is again applied, incorrectly. At least that's one explanation.
>
> Applying the margin to the top of the float eliminates the need for the
> static elements to be 40px apart. Clearing either left or right allows
> the
> panel div to butt against the static h1 and hence be positioned
> properly
> with respect to the h1 bottom margin.
>
> Weird bug. Surprising it is shared by opera and ie.
>
> drew
>
>> I've come across a really strange behaviour in IE5/6 and Opera 7 in
>> windows regarding floated items and was hoping somebody on this list
>> may be able to shed some light on in for me.
>>
>> Here is the URL of my test case
>>
>> http://www.message.uk.com/test/float-test.html
Andy Budd
http://www.message.uk.com/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
