Q:

trying to set up css panels, and failing miserably with scaling :(

the page i am making is at http://kamikazeproductions.net/tooth/kpbr0009.html in browser it looks ok, still needs some finessing... but when i reduce/resize the browser window, or if i navigate via mobile browser, the 2 vertical panels overlap :( 
the idea was to set it up somewhat like https://www.limitedrungames.com/collections/neo-frontpage/products/streets-of-red-ps4, but that page has 3000 lines of code, and css is mostly greek to me.  so i can't figure out how its done.  i miss the days of html 3.0 lol 
so my problems.... the idea is to have a horizontally centered banner panel at the top, 2 vertical panels, and a horizontally centered panel at the bottom.  
1) as stated earlier, the vertical panels overlap when resized, instead of dynamically scaling.  can't figure out how to set a hard break between the 2. 
2) lower panel is WAAAYYY lower than i want it.  i just want to lower panel 2 or 3 lines below the 2 vertical panels.  any help? 
3) i wouldn't mind having about 20px of space or so between the left image and the left side of the window... but it's not a deal breaker.  i tried the ol' &nbsp; but it didnt seem to do anything to add spacing.  i'm just trying to do a very quick and dirty order page for tomorrow.  thanks!  
<! doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tooth And Nail VHS Collection Blu-Ray</title>
<style>
body {
  background-image: url("http://www.kamikazeproductions.net/tooth/bg.jpg");
  }

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.leftpane {
    width: 25%;
    height: 100%;
    float: left;
    border-collapse: collapse;
}

.rightpane {
  width: 75%;
  height: 100%;
  position: relative;
  float: right;
  border-collapse: collapse;
}
</style>
</head>
<body>
<div class="container">
  <div class="toppane">
<center><img src="http://www.kamikazeproductions.net/tooth/banner.png" height="229" width="630"></center><br><br>
    </div>

<div class="leftpane">
<br><br><br><IMG SRC="http://www.kamikazeproductions.net/tooth/package.png" height="504" width="420" ALIGN="left" />
    </div>

<div class="rightpane">
<p><b><font size="5">$23.00, postage included!</b></font>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="NR2DBYM5SJESS">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" >
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form><br>
<font size="4">blah blah blah<br>
<br clear="all">
    </div>

<div class="bottompane">
<p><center><font size="5">blah blah blah</font><br><br><iframe width="560" height="315" src="https://www.youtube.com/embed/LAZKY45-PYM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br><br><br><br><br> (c) 2020 Kamikaze Productions</center>
</p>
    </div>
</div>
</body>
</html>

A:

Because your image tag contains explicit ratio declarations, it will not be fluid with the containers.  
You could either 
1.  setup a grid system (i use flex box in my example but you could also use true grid) and use some media queries to have the grids stack as a column as the view port shrinks
<style>
section[role="container"]{
    display: flex;
    flex-direction: row;
}

section[role="container"] *{
    flex-grow: 1;
}

@media screen and (max-width: 500px){
    section[role="container"]{
    flex-direction: column;
    }
}
</style>
    <section role="container">
        <div class="left-pane">content</div>
        <div class="right-pane">content</div>
    </section>

set your image size with percentages so the image fills it's container and remains fluid.  you could add a max-width min-width if you want to prevent going below a certain resolution. 