Issues with floats

Authoring Twine
1

I’ve recently changed around my stylesheet to allow it for appropriate fit the text to smaller screens, but it seems to have ruined my float.

For context, it’s a passage for an inventory system. Each item added to the inventory had it’s own passage, and I’m using a simple click and display set of macros hidden within a div class container. My aim was for the float to sit on the right hand side of the main inventory text, so that with each item clicked on the inventory, the description for it would show up on the right without making it look cluttered.

The problem is that whenever I test the passage, the float isn’t alligned to the right hand side. It still sits beneath the rest of the inventory, relative to the text position in the passage itself.

Here’s my float code:

.img-container-inv
{
  float: right;
  position: static;
  border: 3px solid #73AD21;
}

If anyone has any ideas, I’d greatly appreciate it.

1 Like
2

It’s hard to say with just that one piece of CSS, since there are a number of reasons why you might see what you’re describing. I’d need to see the code in the passage or, better yet, a link to a minimal version of a Twine page showing the problem.

3

Here’s the text for the inventory:

<h2>Inventory</h2>

(if: $inv's length > 0)[Your inventory contains a (print: $inv.join(", ")).](else:)[Your inventory is empty.] 

<div class='img-container-inv'>{
// There's a handful of harlowe code here
}</div>


(link-goto: "Return", (history:)'s last)

And the stylesheet info:

@import url('https://fonts.googleapis.com/css?family=Oxygen');
.img-container-inv
{
  float: right;
  position: static;
  border: 3px solid #73AD21;
}

tw-story
{
  background-image: linear-gradient(#145100, #082100);
  padding: 5%;
}

tw-passage
{
  font-family: 'Oxygen', sans-serif;
  font-size: 16px;
  text-align: left;
  line-height: 1.5em;
}
tw-sidebar tw-icon.redo {
	display: none;
}
tw-sidebar tw-icon.undo {
	display: none;
}
.enchantment-link, tw-link {
	color: #D69c00;
}

.enchantment-link:hover, tw-link:hover {
	color: #FFBA00;
}
.enchantment-link, tw-link.visited {
	color: #D1CE00;
}

.enchantment-link:hover, tw-link.visited:hover {
	color: #FFFC00;
}
tw-sidebar{
 display: none; 
}

Hope it helps.

4

The line-breaks between the (else:) macro’s associated hook and the div.img-container-inv element will effect where that element appears vertically.
eg. the float only effects the element’s horizontal position, not its vertical.

Try changing the passage to the following instead.

(if: $inv's length > 0)[Your inventory contains a (print: $inv.join(", ")).](else:)[Your inventory is empty.]\
<div class='img-container-inv'>{
// There's a handful of harlowe code here
}</div>
1 Like