@Lady aside but kitty

@Lady remind me to take that for a spin btw

@Lady did you adapt this from that one 7c creation myth thing? reminisciet of that to me

@aescling uh, i didn’t look at that when i was writing this, and i’m pretty sure that that didn’t use Grid for sizing the areas (could be wrong), but the technique of using a float with margins that make it effectively 0 width is something i developed for that, yeah

@Lady what does making it “effectively 0 width” do exactly and why do you want that?

@aescling so the problem being solved here is when you have two annotations, they shouldn’t overlap

using Float: Left plus Clear: Left prevents the overlap by making each annotation come after the end of the previous one

however floats normally do this:

text text blah blah blah, blah
┌───┐blah blah blah
│float │blah bleh bloop
└───┘blorg blah.

relative positioning shifts the float until it is in the margin, but it doesn’t affect the space reserved for it in document flow. to take care of that, we add a negative right margin equal to the width of the float, which effectively pulls the surrounding content in from the right, as if the float had no width.

to see, try disabling the Margin-Right in the web inspector. you’ll see the reserved space. disable Position: Relative, and you’ll see where the float would normally be placed.

@Lady neat!

what’s making sure you can see any text given that the effective size of the annotations is 0?