How to contain two spans next to each-other in PassageFooter

Question

Hello there,

I'm using Twine 2, Sugarcube 2 and am trying to get two spans to align next to each-other horizontally in the footer. Here is my current code:

CSS:

#footer1 {
    float: left;
    width: 100%;
  	margin: 20px 0px 10px 0px;
    border: 1px solid #000000;
}

#footer2 {
    float: left;
    width: 100%;
  	margin: 20px 0px 10px 0px;
    border: 1px solid #000000;
}

::PassageFooter

<<if not tags().includes("nofooter")>>\
<span id="footer1"><b>Visible Items:</b> <<container>>
<b>Inventory:</b>
<<droplist>>
</span>\
<span id="footer2"><b>Other Stuff Here!</b>
</span>\
\<</if>>

The container and droplist macros use Chapel's Custom Macros For Sugarcube 2 and this passage specifically uses his Simple Inventory macros with the Passage Containers Extension to display inventory. Presently, this code shows two outlined boxes, one above the other in the footer. Again, I'm trying to get them to fit next to each-other, side by side and still be browser/mobile responsive. I've tried numerous other approaches, including the web development approach of using li tags in css and then divs in the html (in the ::PassageFooter passage) to no avail. Thanks for any suggestions!

Answer 1

NOTE: When making reference to third party add-ons like the Simple Inventory found on Chapel's Custom Macros For Sugarcube-2 site it is important to include a link to the add-on so that the potential answer-er (or other readers) will know of which one you speak of, it is also a good idea to list any extensions (like Passage Containers) you are using so that they don't need to work that out themselves.

The generated HTML of the PassageFooter special passage is added directly to the end of that of the current Passage, there is no separator or wrapper around the footer's content. This means that it's parent is the .passage classed div. I suggest wrapping both of the span elements within a parent div element to separate them from their current parent.

<<if not tags().includes("nofooter")>>\
<div id="passage-footer">\
<span id="footer1"><b>Visible Items:</b> <<container>>
<b>Inventory:</b>
<<droplist>>
</span>\
<span id="footer2"><b>Other Stuff Here!</b>
</span>\
</div>\
<</if>>

The main issue with your example CSS is that you have given both of your span elements a width of 100% (of the parent element's width) which means they can't both fit on the same horizontal plane. I would suggest change them both to something like 49%.
(note: you can't use exactly 50% for both spans because of the horizontal space of the border, and any potential rounding error made by the web-browser's render-er when calculating 50% of the parents width in pixels.)

#footer1 {
    float: left;
    width: 49%;
  	margin: 20px 0px 10px 0px;
    border: 1px solid #000000;
}

#footer2 {
    float: left;
    width: 49%;
  	margin: 20px 0px 10px 0px;
    border: 1px solid #000000;
}

 

Comments

Thanks much greyelf! Thanks also for the reminder to include pertinent linkage. I usually behave well with that but neglected it in my initial post. I've edited it appropriately.

---

Note that the links in <<droplist>> and the links in <<containers>> will automatically update the content within their own macros, but not the content generated by the other. I'm not sure if you've already developed a solution to this or if it matters; I just wanted to point it out.