Sugarcube background image and 2 divs in it (solved)

Authoring Twine
,
1

Twine Version: Latest download
Story Format: Sugarcube

Hi.

CSS clearly is not my strong point here, because i cant figure out this one.
So idea is that passage allways has same background image (bookpages) and in passage ill use two divs. One on left and one on right. Just like page books.

Imo, other div should now float right but it wont :-/ Also, bookpages is not shown full.

CSS:

#passages {
  width: 100%;
  margin; 2% 2% 2% 2%;
  background: url("https://ekbass-codes.000webhostapp.com/img/bookpages.png");
}

.pageone {
  max-width: 45%;
  height: 100%
  margin: 2%;
  float: left;
  border-style: solid;
  border: #FF1493;
}

.pagetwo {
  max-width: 45%;
  height: 100%
  margin: 2%;
  float: right;
  border-style: solid;
  border: #FF1493;
}

Passage itself:

<div id="pageone">
blaablaa

blaablaa
page one
</div>
<div id="pagetwo">
foo bar
dim dam dom
page two
</div>
![twineprob|690x307](upload://2B1RRVXzZpQP6pwr5PbMCJQWoIH.jpeg)
2

Incase image not seen, it’s here twineprob.png - Google Drive

3

You created IDs in the div, but coded classes in the CSS.
. should be # in the css OR id= should be class= in the passage.

EDIT: you are missing a ; after height:100% on both page CSS code btw

4

Damn, got it :smiley:

html, body {
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

#passages {
  border: 1px solid red;
  width: 100%;
  background: url("https://ekbass-codes.000webhostapp.com/img/bookpages.png");
  background-size: 100%;
  display: flex;
  height: 100%;
  margin-bottom: 0;
  margin-top: 0;
}


#pageone {
  border: 1px solid red;
  max-width: 40%;
  margin-left: 9%;
  margin-top: 0;
  float: left;
}

#pagetwo {
  border: 1px solid red;
  max-width: 38%;
  margin-right: 10%;
  margin-top: 0;
  float: right;
}
1 Like