Floats, a problem with how high they float up to

[Michael Rozdoba]

http://digitalrat.co.uk/test/index.html

I float a div left in body prior to a div with top margin set. I
expected the float to rise to the top of body, but instead in Firefox &
Opera its top won't go above the top border of the following div (In IE
it does go right up).

Is this correct behaviour?

Unless I'm missing something, this appears to be a case of CSS
specifying floats should go as high as possible, without clearly
defining what this means (Eric Meyer gives a warning about this on p284
of 2nd ed of CSS The Def Guide).

Am I in error, the browsers or the CSS spec?

BTW I can workaround this by putting the spacing onto body padding &
removing the 2nd div's margin; I just wanted to understand what's going on.

Cheers,

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Spartanicus]

Michael Rozdoba <mr**@nowhere.invalid> wrote:

http://digitalrat.co.uk/test/index.html

I float a div left in body prior to a div with top margin set. I
expected the float to rise to the top of body, but instead in Firefox &
Opera its top won't go above the top border of the following div (In IE
it does go right up).

Is this correct behaviour?

Unless I'm missing something, this appears to be a case of CSS
specifying floats should go as high as possible, without clearly
defining what this means (Eric Meyer gives a warning about this on p284
of 2nd ed of CSS The Def Guide).

Am I in error, the browsers or the CSS spec?

BTW I can workaround this by putting the spacing onto body padding &
removing the 2nd div's margin; I just wanted to understand what's going on.

What you are seeing is collapsing margins, e.g. setting a 1px padding on
the body will prevent the margins from collapsing.

--
Spartanicus

[Michael Rozdoba]

Spartanicus wrote:

What you are seeing is collapsing margins, e.g. setting a 1px padding on
the body will prevent the margins from collapsing.

Not sure I follow; probably my error.

There's no margin on the floated div & no padding on the container
(body), so I would expect the div to rise to the top. Except in Firefox
& Opera it doesn't - it only gets as high as the border of the static
div which follows it (that intentionally is positioned lower with a top
margin).

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Jón Fairbairn]

Michael Rozdoba <mr**@nowhere.invalid> writes:

Spartanicus wrote:

What you are seeing is collapsing margins, e.g. setting a 1px padding on
the body will prevent the margins from collapsing.

Not sure I follow; probably my error.

There's no margin on the floated div & no padding on the
container (body), so I would expect the div to rise to the
top.

I wouldn't. Ignoring the definitions for a moment, what one
would generally want of a floating item is that it appears
close to the point in the text where it appears in the
source. For example, if you have a picture that illustrates
an idea mentioned half way down a long diatribe, you would
want the float to appear at the left (or right) close to the
idea, not float all the way to the top of the page.

The informal description in CSS21 supports this view (9.5):

A floated box is shifted to the left or right until its
outer edge touches the containing block edge or the outer
edge of another float. If there's a line box, the top of
the floated box is aligned with the top of the current
line box.

Note that it refers to a line box, not containing block.
Again, in 9.5.1

6 The outer top of an element's floating box may not be
higher than the top of any line-box containing a box
generated by an element earlier in the source document.

I think the later text in 9.5.1 causes the confusion:

8 A floating box must be placed as high as possible.

because it doesn't explicitly say "... consistent with 6
above", but I'm sure that's what's intended.

--
Jón Fairbairn Jo***********@cl.cam.ac.uk

[Michael Rozdoba]

Jón Fairbairn wrote:

Michael Rozdoba <mr**@nowhere.invalid> writes:

Spartanicus wrote:

What you are seeing is collapsing margins, e.g. setting a 1px padding on
the body will prevent the margins from collapsing.

Not sure I follow; probably my error. There's no margin on the floated div & no padding on the
container (body), so I would expect the div to rise to the
top.

I wouldn't. Ignoring the definitions for a moment, what one
would generally want of a floating item is that it appears
close to the point in the text where it appears in the
source.

The floated div is the first element inside the body, hence my expectation.

This would have been much more clear if I'd just cut & paste the source
into my post, but posters are often told to give an url instead. Oh well.

Still none the wiser as to what's going on or whether the fault is mine.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Spartanicus]

Michael Rozdoba <mr**@nowhere.invalid> wrote:

What you are seeing is collapsing margins, e.g. setting a 1px padding on
the body will prevent the margins from collapsing.
Not sure I follow; probably my error.

There's no margin on the floated div

It's the top margin on the other div that is causing it.

You're welcome to try and derive the correct behaviour from the css spec
regarding collapsing margins when floats are concerned. I'd suggest you
don't attempt to do so if you care about your mental health, the rules
are preposterously complex.
so I would expect the div to rise to the top. Except in Firefox
& Opera it doesn't

Rule of thumb: where Opera and FF/Moz render similarly and IE does
something else; IE is wrong.

--
Spartanicus

[Jón Fairbairn]

Michael Rozdoba <mr**@nowhere.invalid> writes:

Jón Fairbairn wrote:

Michael Rozdoba <mr**@nowhere.invalid> writes:

There's no margin on the floated div & no padding on the
container (body), so I would expect the div to rise to the
top.

I wouldn't. Ignoring the definitions for a moment, what one
would generally want of a floating item is that it appears
close to the point in the text where it appears in the
source.

The floated div is the first element inside the body,
hence my expectation.

Now I'm confused. What I see in firefox is that the top of
the floated box is aligned with the top of the
content. Isn't that what you'd expect?

--
Jón Fairbairn Jo***********@cl.cam.ac.uk

[Michael Rozdoba]

Jón Fairbairn wrote:

Michael Rozdoba <mr**@nowhere.invalid> writes:

Jón Fairbairn wrote:

Michael Rozdoba <mr**@nowhere.invalid> writes:

There's no margin on the floated div & no padding on the
container (body), so I would expect the div to rise to the
top.

I wouldn't. Ignoring the definitions for a moment, what one
would generally want of a floating item is that it appears
close to the point in the text where it appears in the
source.

The floated div is the first element inside the body,
hence my expectation.

Now I'm confused. What I see in firefox is that the top of
the floated box is aligned with the top of the
content. Isn't that what you'd expect?

It might generally be what one wants, but it isn't what I'd expect from
my last attempt to make sense of the spec. I wouldn't expect the content
following the float to prevent the float rising higher, yet that's the
only thing stopping it.

Maybe I just have abnormal expectations. I'm inclined to thing Eric
Meyer's comments do account for this - referring to ambiguity over the
references to as high as possible in the spec.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Michael Rozdoba]

Spartanicus wrote:

Michael Rozdoba <mr**@nowhere.invalid> wrote:

What you are seeing is collapsing margins, e.g. setting a 1px padding on
the body will prevent the margins from collapsing.
Not sure I follow; probably my error.

There's no margin on the floated div

It's the top margin on the other div that is causing it.

Oh yes, I realised that after about twenty minutes. I just couldn't
understand why that should influence the vertical position of a float
which occurs earlier in the flow.
You're welcome to try and derive the correct behaviour from the css spec
regarding collapsing margins when floats are concerned. I'd suggest you
don't attempt to do so if you care about your mental health, the rules
are preposterously complex.

LOL. Yes, they were painful reading last time I looked at this. Today I
just made do with experimentation & Meyer's Def Guide to CSS - which was
hard enough to follow when explaining the nine sequential rules involved
(or thereabouts).

so I would expect the div to rise to the top. Except in Firefox
& Opera it doesn't

Rule of thumb: where Opera and FF/Moz render similarly and IE does
something else; IE is wrong.

I know. I'm no fan of IE. Though to be fair I seem to recall there are
one or two exceptions.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Jón Fairbairn]

Michael Rozdoba <mr**@nowhere.invalid> writes:

Jón Fairbairn wrote:

Now I'm confused. What I see in firefox is that the top of
the floated box is aligned with the top of the
content. Isn't that what you'd expect?

It might generally be what one wants, but it isn't what I'd
expect from my last attempt to make sense of the spec. I
wouldn't expect the content following the float to prevent
the float rising higher, yet that's the only thing stopping
it.

As I understood it, the content of content (sic) determines
where the baseline of the first line of the containing block
is (there's nothing else to do it), and it's that that's
causing it. However, as Spartanicus has said, the spec
should bear a health warning, and trying to work out how
line-boxes and floats interact like this is dangerous work.

I could easily be mistaken. Natural language isn't a
suitable tool for writing specifications of computer
languages, but that's what we're given :-(

Anyhoo, if you put:

<div style="visibility: hidden; line-height: 0">
&nbsp;
</div>

before the nav division, you get a different baseline for
the first line, I think what you want (in Firefox, at
least). At this point I'm not at all sure whether it should,
though, and if I were to read any more of the spec to find
out I'd probably need medication.

--
Jón Fairbairn Jo***********@cl.cam.ac.uk

[Jón Fairbairn]

"Jón Fairbairn" <jo***********@cl.cam.ac.uk> writes:

At this point I'm not at all sure whether it should,
though, and if I were to read any more of the spec to find
out I'd probably need medication.

From what I did read, I'm sure the float ought to overlap
the border of content. Why doesn't it?

--
Jón Fairbairn Jo***********@cl.cam.ac.uk

[Paul]

Michael Rozdoba wrote:
<snip>

Oh yes, I realised that after about twenty minutes. I just couldn't
understand why that should influence the vertical position of a float
which occurs earlier in the flow.

Aren't floats taken out of normal flow? In which case the order doesn't
matter.

[Michael Rozdoba]

Paul wrote:

Michael Rozdoba wrote: <snip>

Oh yes, I realised that after about twenty minutes. I just couldn't
understand why that should influence the vertical position of a
float which occurs earlier in the flow.
Aren't floats taken out of normal flow?

In a sense - mostly in respect of positioning following block level
elements.
In which case the order doesn't matter.

It does - floats won't rise higher than any earlier floating or block
level element.

--
Michael
m r o z a t u k g a t e w a y d o t n e t