Forum Bugs

Strange interaction with floats and borders

Tgoh
I've found a pretty serious bug where a div with a border inside a floating element causes the margins to bug out.

Tested against Prince 10 rev 7. "box-sizing" is set to "border-box".

See attached file.
  1. BorderTest.html0.9 kB
hallvord
Hi,
is there any particular reason you don't set width on the floating element itself? As noted in https://www.sitepoint.com/web-foundations/css-box-model/ (although perhaps not at all relevant for the projects you are working on) it will probably help your code remain compatible with more browsers and rendering engines.

That said, I think Prince should shrink the outer DIVs more. I borrowed most of your code to make a test case for this repository:
https://github.com/yeslogic/miscellaneous-testcases/blob/master/layout/floating-parent-of-child-with-width-001.htm
Hope you don't mind :)!

Announcement: repos for tests/utils

Tgoh
The idea is that the outside div is just a wrapper, and the inside is dynamically generated content. At the point of generation we won't know what the width is so we can't set a fixed width on the outside box.

We have found workarounds, but I thought that I would report this bug because it feels like a pretty fundamental issue that will probably manifest itself in more complicated scenarios.
hallvord
Absolutely, I hope the test case in the repository will make it easier for the developers to investigate and fix this :)

Announcement: repos for tests/utils

markbrown
Hi,

Prince 13.4, available here, contains a fix for this bug.

Mark