Trouble wrapping text around a mini-map element

Twine Version: 2.3.14
Story Format: Sugarcube 2.34.1

Hello, I’ve developed a minimap element for use in my story to show the player where they are in relation to rooms they’ve already been in and stuck it in the upper right corner of the gamespace. But unfortunately, it seems to overwrite passage text in some cases, particularly in smaller windows and monitors. I’ve done some digging to try and fix this, but without real success, the closest I could find was the CSS float property for images, but that doesn’t seem to work for this purpose, or I’m using it incorrectly. As a stopgap, I’ve rigged it so you can hide the map with a toggle in the sidebar, but this is a less than ideal solution. Any help is appreciated, I’ll include the relevant bits of the stylesheet at the bottom.

The contents of the minimap passage basically sets up a 10x10 row of small images of blank square tiles that change to the relevant room tile after the player visits the room, with the currently occupied room blinking in and out.

/* Styling and Colours of the minimap. */
#map-element {
background-color: #222;
text-align: left;
float: right;
border: 5px solid #222;
}
#title-element {
background-color: #222;
text-align: left;
float: right;
border: 5px solid #222;
}

/* Layout and Positioning of the minimap. */
#map-element {
position: fixed;
z-index: 50;
top: 10px;
right: 10px;
width: 241px;
height: 226px;
float: right;
-webkit-transition: right .2s ease-in;
-o-transition: right .2s ease-in;
transition: right .2s ease-in;
}
#map-body {
width: 241px;
height: 226px;
line-height: 1;
float: right;
}
#title-element {
position: fixed;
z-index: 50;
top: 256px;
right: 10px;
width: 241px;
height: 20px;
float: right;
-webkit-transition: right .2s ease-in;
-o-transition: right .2s ease-in;
transition: right .2s ease-in;
}
#title-body {
width: 241px;
height: 20px;
line-height: 1;
float: right;
}

/* Stowing of the minimap. */
#map-element.stowed {
visibility: hidden;
}
#map-element.stowed #map-body {
visibility: hidden;
-webkit-transition: visibility .2s step-end;
-o-transition: visibility .2s step-end;
transition: visibility .2s step-end;
}
#title-element.stowed {
visibility: hidden;
}
#title-element.stowed #title-body {
visibility: hidden;
-webkit-transition: visibility .2s step-end;
-o-transition: visibility .2s step-end;
transition: visibility .2s step-end;
}

/* Blink animation. */
.blink {
-webkit-animation: blinker 1s step-end infinite;
animation: blinker 1s step-end infinite;
}
@-webkit-keyframes blinker {
50% { visibility: hidden; }
}
@keyframes blinker {
50% { visibility: hidden; }
}

Looks like you have both float:right and position:fixed on your #map-element? I don’t know the rules for that but I wouldn’t expect it to work: probably the fixed position overrides it so it’s ignoring the float? Just a guess.

What does your HTML look like?

We would need to see an example of the Passage content so we can determine what HTML elements are being created, both by the “mini-map” code as well as the “textual” content you want wrapped around it.

You might have less trouble with a <<button>>: when -and only when- the player clicks the map appears in a window.

The HTML/Javascript is pretty simple:

/* Create the map element. */
var $MapElement = $('<div id="map-element"></div>').insertAfter("#ui-bar");

var MapBody = $MapElement.append('<div id="map-body"></div>');

/* Automatically show the contents of the MapElement passage in the map-body element. */
postrender["Display Map Contents"] = function (content, taskName) {
	setPageElement('map-body', 'MapElement');
};

/* Create the title element. */
var $TitleElement = $('<div id="title-element"></div>').insertAfter("#map-element");

var TitleBody = $TitleElement.append('<div id="title-body"></div>');

/* Automatically show the contents of the TitleElement passage in the title-body element. */
postrender["Display Title Contents"] = function (content, taskName) {
	setPageElement('title-body', 'TitleElement');
};

As for an example of the map passage this is one of the ten ‘rows’ of tiles, the rest are identical just with different room tags and images:

/%Row 10%/<<if visitedTags("F1SC")>><<if tags().includes("F1SC")>><span class="blink"><img src="img/Room1.png"/></span><<else>><img src="img/Room1.png"/><</if>><<else>><img src="img/Blank.png"/><</if>> <img src="img/Blank.png"/> <img src="img/Blank.png"/> <img src="img/Blank.png"/> <img src="img/Blank.png"/> <img src="img/Blank.png"/> <img src="img/Blank.png"/> <img src="img/Blank.png"/> <img src="img/Blank.png"/> <img src="img/Blank.png"/>

An example of the title element’s passage that sits directly below the map with the room name:

<div style='font-size: 125%;'>@@.blue;<<if tags().includes("F1S")>>''Test Room 1''<</if>>@@</div>

As for the textual content, it’s just standard Twine 2 passage text. Perhaps a screenshot will clarify: Imgur: The magic of the Internet

Apologies for bumping my own thread, but does anyone have a clean solution? The only thing I’ve been able to think of since is making an entire right-hand sidebar and sticking the map in that, or maybe seeing if I can fit it in the default sidebar without it causing problems, but both of those are less than ideal.

Did you try it with just the float: right on the #map-element and taking out all the other conflicting positioning stuff?

Ah, yes, I completely forgot to post about that after I tried it. It…kind of worked, but it shoved the map up against the very edge of the screen to the right and lowered it down like half an inch from the top, which ruined the nice clean border I’d had in the upper right corner. I could have lived with that, but it also completely messed up the room title element by shoving it to the left of the map rather than underneath it, and I could not figure out a way to fix it, because the float: right seems to override all positioning inputs/coordinates.

Ah. If you can put the map after the header it should be below? I think floats just go left or right from where they are in the vertical flow. And you can probably add margins or padding to space it away from the edge.

Ah, it looks like there was another page about the float property I hadn’t noticed the first time through, which explained how to get elements below it by using the clear property, so I just inserted a “clear: right;” above the “float: right;” of the title element, added some margins to the map and title elements and its pretty much solved. Still shoved down like an inch from the top of the window, but I can definitely live with that.