HELP Making a Separate Div for Character Art in SugarCube

Question

Hey everyone! I'm new to sugarcube and I'm really struggling with my css to try to accomplish what I want to do, that is have a separate div to the right of my passage in which I can put character art when a particular character is speaking. The issue I'm running into is there's an invisible bar cutting through (and decapitating! lol) my character art right now and I don't know how to override/get rid of it. 

Here's a picture of what's happening right now: https://i.imgur.com/fhprYRR.png

I want the character art to be positioned at the bottom right corner of the screen and to be able to be viewed without that weird bar cutting through it! I'm sure there's a much easier way I could be doing this and fixing this problem, so any help would be greatly appreciated. :) 

Here's my CSS:

@import url('https://fonts.googleapis.com/css?family=Cutive+Mono|IM+Fell+English+SC|Press+Start+2P|VT323');

html {
  background-color: inherit;
}

body {
  background-color: #000;
  background-image: url('https://i.imgur.com/pTVb8jy.png');
  font-family: 'Press Start 2P', cursive;
  margin: 0px;
  font-size: 14px
  text-align: center;
  z-index: -999;
}

/* CHARACTER ARTBOX */
#character {
  background-color: transparent;
  width: 400px;
  height: 600px;
  position: fixed;
  bottom: 0px; 
  right: 0px;
}

/* MAIN PASSAGE BOX */
#passages {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 1em;
  width: 800px;
  height: 450px;
  overflow: auto;
  position: fixed;
  bottom: 20px;
  left: 100px;
  padding: 0px;
}

.passage {
  margin: 0px;
  padding: 2em;
  color: black;
  font-size: 14px;
  text-align:left;
  line-height:20px;
}

And then, how would I add in the image for specific passages? Should I put something like

<div id="character">
<img src="url">
</div>

at the end of my passage? That's how I've been doing it now, but I'm pretty sure that's probably part of my problem... :( 

Thanks!!

Answer 1

Attempting to diagnosing this off the cuff, and from memory, so this may be off.

You're setting the height of the #passages container to 450px, but the height of the #character container to 600px.  Even though you've fixed the position of #character, it's a child of .passage which is bound to its parent's dimensions, so the clipping may be coming from there.

Comments

Oohhhh, okay! That makes sense... and it fixed the problem! But I'd love to keep the passage itself smaller and the character art larger... Is there a way to make #character not a child of .passage?