Solution 1 :

Because your image tag contains explicit ratio declarations, it will not be fluid with the containers.

You could either

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

    display: flex;
    flex-direction: row;

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

@media screen and (max-width: 500px){
    flex-direction: column;
    <section role="container">
        <div class="left-pane">content</div>
        <div class="right-pane">content</div>
  1. 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.

Solution 2 :

You can use bootstrap and css like col-lg, col-md, col-xs and so on… to provide your webpage for normal Manitor, Tablet size, mobile size, etc

You should read below link:

Meaning of numbers in “col-md-4″,” col-xs-1″, “col-lg-2” in Bootstrap

Problem :

the page i am making is at 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, 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>
<meta charset="utf-8">
<title>Tooth And Nail VHS Collection Blu-Ray</title>
body {
  background-image: url("");

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;
<div class="container">
  <div class="toppane">
<center><img src="" height="229" width="630"></center><br><br>

<div class="leftpane">
<br><br><br><IMG SRC="" height="504" width="420" ALIGN="left" />

<div class="rightpane">
<p><b><font size="5">$23.00, postage included!</b></font>
<form action="" 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="" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="" width="1" height="1">
<font size="4">blah blah blah<br>
<br clear="all">

<div class="bottompane">
<p><center><font size="5">blah blah blah</font><br><br><iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br><br><br><br><br> (c) 2020 Kamikaze Productions</center>


Comment posted by k_huntington

option 1 got it to work! now we are in business. i’m really just brute forcing this thing so i went into PS and added more pad on each side of the image to give it more spacing. not ideal for most, but it works in a pinch. thanks for the help!

Comment posted by zhwatts

awesome! I checked your site again and see that it is scaling now, however I wouldsuggest you setup multiple @media blocks for various break points (i.e. when sizing for TV, large monitor, small monitor, tablet, phone). And then I would suggest setting the max width for your column stack to the size of the image with a explicit ratio. (max-with : whatever the width of your image is).. this way there is never any overflow