SugarCube 2: Creating 3 panels in a row

Hi all, first time poster and I am pretty new to Twine as well so apologies if I haven’t done this right.

I am trying to display three panels side by side across the screen in Twine. I am trying to do this with the code below. The panels display correctly when I have the code within <\html> tags but this then breaks any Twine stuff I put in there like <<print $pName>>. If I remove the tags then the layout of the three panels goes wrong with the second and third panel displaying a line down from the one to the left.

Does anyone know how to get a display like this using just Twine markup or how I incorporate the Twine code within the tags. Many thanks in advance.

My StyleSheet:

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px; 
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

My passage is:

<html>
<body>
<h2>Three panel test</h2>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p><<print $pName>></p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>$eName</p>
  </div>
</div>
</body>
</html>

If you’re attempting this within the normal structure of SugarCube’s UI, try the following:

<<nobr>>
<h2>Three panel test</h2>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p><<print $pName>></p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>$eName</p>
  </div>
</div>
<</nobr>>

In addition to what TheMadExile said, a Twine game is already wrapped within <html> and <body> elements, and you’re only allowed to have them once each in a valid HTML file, so by putting them within a passage you’re creating broken HTML.

In other words, don’t think of passages as separate HTML files. Instead, if you want to avoid making broken HTML code, you need to realize that they’re just parts of one larger HTML file.

Also, TheMadExile used the <<nobr>> macro in his code, because, unlike standard HTML, SugarCube normally turns line breaks into HTML <br> elements, which produce line breaks. In order to keep the formatting of the HTML code readable for you, but also be displayed properly within the game, the <<nobr>> macro prevents the automatic creation of those <br> elements within that macro. You can produce the same effect in a whole passage by adding a “nobr” tag to it, or even do the same thing for your entire game by using the Config.passages.nobr setting.

Finally, instead of doing <<print $pName>>, you can take advantage of the SugarCube “naked variable” markup, and simply put $pName there instead. SugarCube will automatically recognize it as a variable and thus will display the variable’s value instead of its name.

Hope that helps! :slight_smile:

That’s great, many thanks for all your help :slight_smile: