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' 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">
<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>
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>