205px image in a 200px div

[Jim]

Should the browser increase the div to 205px? or overflow the image?
Reading the spec http://www.w3.org/TR/CSS21/visufx.html it makes no
reference to inline-replaced elements though I'd assume that it behaves
in the same way as a block-level box.

Can anyone confirm?

Ta,

Jim.

[Steve Pugh]

Jim wrote:

Should the browser increase the div to 205px? or overflow the image?
Reading the spec http://www.w3.org/TR/CSS21/visufx.html it makes no
reference to inline-replaced elements though I'd assume that it behaves
in the same way as a block-level box.

As inline-replaced elements are still inline elements they exists
inside line boxes, therefore the first bullet point seems to apply.

"A line cannot be broken, causing the line box to be wider than the
block box."

As you can't break a line inside an image, the line box containing the
image will be wider than the block box. So overflow occurs.

Steve

[Jim]

Steve Pugh wrote:

Jim wrote:

Should the browser increase the div to 205px? or overflow the image?
Reading the spec http://www.w3.org/TR/CSS21/visufx.html it makes no
reference to inline-replaced elements though I'd assume that it behaves
in the same way as a block-level box.

As inline-replaced elements are still inline elements they exists
inside line boxes, therefore the first bullet point seems to apply.

"A line cannot be broken, causing the line box to be wider than the
block box."

As you can't break a line inside an image, the line box containing the
image will be wider than the block box. So overflow occurs.

Steve

Thanks for the clarification, Steve. To carry on from this, lets say a
page consists of 2 floats, a left and a right, of equal width. Now
assume that an image in the left float overflows in to the right float.
What's the correct behaviour? In FF and Opera the right float stays
where it is and the left float's image "overflows" on to it, in IE the
right float is pushed under the left float. I'm assuming the behaviour
seen in FF and Opera is correct.......is that so? Is there anywhere in
the spec that you know of that deals with this situation? Had a look
through but couldn't spot anything.

Ta,

Jim.

[Steve Pugh]

Jim wrote:

Steve Pugh wrote:

Jim wrote:

Should the browser increase the div to 205px? or overflow the image?
Reading the spec http://www.w3.org/TR/CSS21/visufx.html it makes no
reference to inline-replaced elements though I'd assume that it behaves
in the same way as a block-level box.

As inline-replaced elements are still inline elements they exists
inside line boxes, therefore the first bullet point seems to apply.

"A line cannot be broken, causing the line box to be wider than the
block box."

As you can't break a line inside an image, the line box containing the
image will be wider than the block box. So overflow occurs.

Thanks for the clarification, Steve. To carry on from this, lets say a
page consists of 2 floats, a left and a right, of equal width. Now
assume that an image in the left float overflows in to the right float.
What's the correct behaviour? In FF and Opera the right float stays
where it is and the left float's image "overflows" on to it, in IE the
right float is pushed under the left float. I'm assuming the behaviour
seen in FF and Opera is correct.......is that so? Is there anywhere in
the spec that you know of that deals with this situation? Had a look
through but couldn't spot anything.

No need for specific rules, the standard rules for floats and for
overflows cover this.

Assuming that the floats have widths set and that the images are
contained within floated elements and are not floated themselves...

Then yes, FF and Opera are correct and IE is wrong. The floated
elements are placed first according to the rules for floats. If the
floats were too wide to fit alongside each other then the one defined
last would drop down. But if they fit, they fit.

The too wide image doesn't make the floated element any wider, so it
can't cause the placement of the floats to be recalculated. It does
overflow as per normal.

IE gets the overflow wrong and extends the floated container, this then
causes the calculations for float placement to be re-evaluated and the
last specified float is moved downwards.

Steve