When the content on my page doesn't fit the screen, it moves the rest of the page. How can I fix this?

Question

I have a page with an input section that hides when submitted and displays the answers. When the answers are displayed, some divs move around. They only move when the answer section takes up less space than the height of the screen, but when the section is smaller than the height of the screen, nothing is moved around.

Does anyone know how to fix this? Thanks

 function showResults() { document.getElementById("inputSection").style.display="none"; document.getElementById('hideButton').style.display = "none"; document.getElementById("Calories").style.display="block"; document.getElementById("Protein").style.display="block"; document.getElementById("Carbs").style.display="block"; }

 .main-section { padding-top: 79px; padding-left: 500px; width: 903px; font-family: 'Anton', sans-serif; display: block; object-fit:cover;}.background { float: left; position: fixed; top: 0px; left: 0px;}.wholeArea { position: absolute; top: 0; right: 0;}.title { font-size: 60px; color: #132c54; padding-bottom: 10px;}.description { font-size: 25px; color: #2569c8; line-height: 29px; margin-bottom: 8px;}.inputText { font-size: 30px; color: #132c54; background-color: white;}.inputField { font-size: 30px; color: #132c54; border-color: #132c54; border-width: 4px; border-style: solid; outline-color: #132c54; border-radius: 6px;}.noDecoration { /* No Text Decoration */ text-decoration: none; color: #132c54;}.selectInput { width: 413px; color: #132c54; outline-color: #132c54; outline-width: 0px; border-color: #132c54; border-width: 4px; border-style: solid; border-radius: 6px;}.textInput { width: 400px; display: inline; color: #132c54; outline-color: #132c54; outline-width: 0px; border-color: #132c54; border-width: 4px; border-style: solid; border-radius: 6px; padding-left: 3px;}.selectOption { font-size: 30px; color: #132c54;}.buttonStyle { font-size: 35px; color: #132c54; background-color: white; outline-color: #132c54; outline-width: 0px; border-color: #132c54; border-width: 4px; border-style: solid; border-radius: 6px;}.buttonToggleStyle { font-size: 25px; color: #132c54; background-color: white; outline-color: #132c54; outline-width: 0px; border-color: #132c54; border-width: 4px; border-style: solid; border-radius: 6px; margin-right: 20px;}.radioStyle { width: 20px; height: 20px; display: inline-block; vertical-align: top;}.leftColumnBox { position: absolute; margin-right: 100px; width: auto; height: auto;}.leftColumnBox2 { position: absolute; margin-top: 321px; margin-right: 100px; width: auto; height: auto;}.rightColumnBox { position: absolute; margin-right: 100px; width: auto; height: auto;}.rightColumnBox2 { position: absolute; margin-top: 321px; margin-right: 100px; width: auto; height: auto;}.leftColumn { width: auto; height: auto; margin-top: 81px; margin-left: 100px; margin-right: 100px; float: left; position: fixed; display: inline; top: 0px; left: 0px;}.rightColumn { width: auto; height: auto; margin-top: 81px; margin-left: 100px; margin-right: 400px; float: left; position: fixed; display: inline; top: 0px; right: 0px;}.advertImage { border: 10px white solid; border-radius: 6px; width: 300px; height: auto;}.resultsSection { display: none;}.radioArea { height: 45px; width: 700px; display: block;}.inputArea { height: 50px; width: 700px; display: block;}.labelText { width: 150px; display: inline-block;}.resultsText { line-height: 28px;}.resultsHeaderText { line-height: 40px; padding: 0px; border: 0px; margin: 0px; margin-bottom: 10px;}.hideInput { display: block;}.mainBorder { border: 20px solid white; border-radius: 12px; background-color: white;}.titleBorder { border: 20px solid white; border-bottom: none; border-top-left-radius: 12px; border-top-right-radius: 12px; background-color: white;}.descBorder { border: 20px solid white; border-top: none; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; background-color: white;}.tabContent { display: none; margin-bottom: 8px;}.tabSwitch { margin-bottom: 8px; }.banner { /* Banner Styles */ width: 100%; color: black; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 24px; float: left; text-decoration: none; cursor: pointer;} html, body { max-width: 100%; overflow-x: hidden;}.noselect { /* No Highlighting */ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */}.banner-head-1 { /* Home Header */ float: left; overflow-wrap: normal; margin-left: 200px; margin-right: 200px; text-decoration: none; color: black; display:block;}.banner-head-2 { /* Food Header */ float: left; overflow-wrap: normal; margin-left: 55px; text-decoration: none; color: black; display:block;}.banner-head-3 { /* Exercise Header */ float: left; overflow-wrap: normal; margin-left: 55px; text-decoration: none; color: black; display:block;}.banner-head-4 { /* Calculators Header */ float: left; overflow-wrap: normal; margin-left: 55px; text-decoration: none; color: black; display:block;}.banner-head-5 { /* Calculators Header */ float: left; overflow-wrap: normal; margin-left: 55px; text-decoration: none; color: black; display:block;}.noDecoration { /* No Text Decoration */ text-decoration: none; color: black;}.banner-logo { height: 40px; border: 10px solid white; border-radius: 12px; margin-top: 5px;}

 <.DOCTYPE html> <html> <head> <script src="./script/banner,js"></script> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="./style/banner.css"> <link rel="stylesheet" href="./style/calorie-calculator.css"> <link rel="stylesheet" href="./style/css-reset:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2.family=Anton&display=swap" rel="stylesheet"> </head> <div id="background" class="background"></div> <span class="wholeArea"> <table class="banner noselect"> <.-- Banner --> <tr> <th class="banner-head-1"><a href="./index.html" class="noDecoration banner-logo">Header 1</a></th> <th class="banner-head-2"><a href="./food-tracker.html" class="noDecoration banner-logo">Header 2</a></th> <th class="banner-head-3"><a href="./articles.html" class="noDecoration banner-logo">Header 3</a></th> <th class="banner-head-4"><a href="./calculators.html" class="noDecoration banner-logo">Header 4</a></th> <th class="banner-head-5"><a href=",/exercise-tracker.html" class="noDecoration banner-logo">Header 5</a></th> </tr> </table> <div class="main-section noDecoration"> <div> <,-- Title --> <p class="title titleBorder">CALORIE CALCULATOR</p> <:-- Title --> <p class="description descBorder">This calculator will estimate how many calories your body needs to consume based on your weight; height and age and other factors. This is also a guide to maintain. gain or lose weight</p><.-- Description --> </div> <div class="mainBorder calculatorSection" id="inputSection"> <.-- Calculator --> <div class="radioArea" style="padding-bottom. 5px." id="input1"> <label class="inputText noDecoration labelText">Units</label> <a href="./calorie-calculator.html"> <input type="radio" class="inputField radioStyle" onclick="window.location='./calorie-calculator;html'"> <label class="inputText noDecoration">Metric</label> </a> <a href="./calorie-calculator-imperial.html"> <input type="radio" class="inputField radioStyle" onclick="window.location='./calorie-calculator-imperial.html'"> <label class="inputText noDecoration">Imperial</label><br> </a> </div> <div class="radioArea" id="input2"> <label for="gender" class="inputText labelText">Gender</label> <input type="radio" id="Male" name="gender" value="5" class="inputField radioStyle"> <label for="Male" class="inputText">Male</label> <input type="radio" id="Female" name="gender" value="-165" class="inputField radioStyle"> <label for="Female" class="inputText">Female</label><br> </div> <div class="inputArea" id="input3"> <label for="Input1" class="inputText labelText">Age</label> <input type="number" id="Input1" class="inputField textInput" placeholder="12-80"><br> </div> <div class="inputArea" id="input4"> <label for="Input2" class="inputText labelText">Height</label> <input type="number" id="Input2" class="inputField textInput" placeholder="100cm - 200cm"><br> </div> <div class="inputArea" id="input5"> <label for="Input3"class="inputText labelText">Weight</label> <input type="number" id="Input3" class="inputField textInput" placeholder="30kg - 120kg"><br> </div> <div class="inputArea" id="input6"> <label for="exerciseInput"class="inputText labelText">Exercise</label> <select id="exerciseInput" class="inputText selectInput"> <option class="inputText selectOption">Exercise</option> <option value="noExercise" id="noExercise" class=" selectOption">Inactive</option> <option value="lightExercise" id="lightExercise" class=" selectOption">Light Activity</option> <option value="moderateExercise" id="moderateExercise" class=" selectOption">Moderate Activity</option> <option value="activeExercise" id="activeExercise" class=" selectOption">Active</option> <option value="veryActiveExercise" id="veryActiveExercise" class=" selectOption">Very Active</option> <option value="extraActiveExercise" id="extraActiveExercise" class=" selectOption">Extra Active</option> </select> </div> <button class="buttonStyle" onclick="showResults()." id="hideButton">ADD</button> </div> <div id="Calories" class="tabContent mainBorder"> <div class="resultsHeaderText">Calories</div> <div class="resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeGain1" class=""></span></div> <div class="resultsText">Weight Gain(0.5kg/week) - <span id="averageGain1" class=""></span></div> <div class="resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildGain1" class=""></span></div> <div class="resultsText">Maintain Calories - <span id="maintain1" class=""></span></div> <div class="resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildLoss1" class=""></span></div> <div class="resultsText">Weight Loss(0.5kg/week) - <span id="averageLoss1" class=""></span></div> <div class="resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeLoss1" class=""></span></div> </div> <div id="Protein" class="tabContent mainBorder"> <div class="resultsHeaderText">Protein</div> <div class="resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeGain2" class=""></span></div> <div class="resultsText">Weight Gain(0.5kg/week) - <span id="averageGain2" class=""></span></div> <div class="resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildGain2" class=""></span></div> <div class="resultsText">Maintain Calories - <span id="maintain2" class=""></span></div> <div class="resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildLoss2" class=""></span></div> <div class="resultsText">Weight Loss(0.5kg/week) - <span id="averageLoss2" class=""></span></div> <div class="resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeLoss2" class=""></span></div> </div> <div id="Carbs" class="tabContent mainBorder"> <div class="resultsHeaderText">Carbs</div> <div class="resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeGain3" class=""></span></div> <div class="resultsText">Weight Gain(0.5kg/week) - <span id="averageGain3" class=""></span></div> <div class="resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildGain3" class=""></span></div> <div class="resultsText">Maintain Calories - <span id="maintain3" class=""></span></div> <div class="resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildLoss3" class=""></span></div> <div class="resultsText">Weight Loss(0.5kg/week) - <span id="averageLoss3" class=""></span></div> <div class="resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeLoss3" class=""></span></div> </div> </div> </span> </html>

Answer 1

Here is a good construct for css. You can use css directly in a html page.

 <STYLE>
.Edit1{font-family: ms sans serif;
overflow:hidden;
position:absolute;
text-align:left;
 left:17px;
 top:18px;
 width:482px;
 height:342px;
 font-size: 10pt;
 tabs: 3.5in;
 margin-left:0px;
 margin-right:0px;
 color:black;
 z-index:0
 }

</STYLE>

<BODY TEXT="Black" BGCOLOR="White" LINK="Blue" VLINK="Green" ALINK="Red">


<div Class="Edit1" STYLE="{left:17; top:18; width:482; height:342; position:absolute;}" >