Q:

Html and Css div error

So I need to create a website for school and i want to add alot of information, but when i add alot of information this happends (I want like an auto height like, when i add more information it ajusts automatly. ps I want to use the same css for all my pages and i have some big pages and some small pages thats why i want that auto ) i tried all Can someone send me the correct code to fix this?
    Here is my code:
    <html>
            <head>
                <title>Markus Persson</title>
                <link rel="icon" href="NotchIcon.png" type="image/x-icon" />
                <meta charset=UTF-8 />
                <link href="Style.css" rel="stylesheet" />
            </head>
            <body>
                <div id="wrapper">
                    <div id="columnLeft">
                    </div>
                    <div id="columnRight">
                    </div>

                    <div id="content">
                        <div id="banner">
                            <ul class="menu">
                                <li  class="dropdown "><a href="MarkusPersson.html" class="dropbtn">Markus Persson</a>
                                <div class="dropdown-content">
                                    <a href="OndeNasceu.html">Onde Nasceu</a>
                                    <a href="OndeVive.html">Onde Vive</a>
                                </div>
                                </li>
                                <li><a href="Mojang.html">Mojang</a></li>
                                <li><a href="Minecraft.html">Minecraft</a></li>
                                <li style="float:right"><a class="active" href="SobreMim.html">Sobre Mim</a></li>
                            </ul>
                        </div>
                        <font face="Modern" size=3>

                            <center><h1>Markus Persson</h1></center>
                        <center><img title="Markus Persson" align=midle src="MarkusPersson.png" width=500 height=380></center>
                        <p class="legenda" align="justify">Img.1 Markus Persson</p>
                        <br>
                        <p align="justify">&nbsp;&nbsp;&nbsp;&nbsp;<b>Markus Persson</b> mais conhecido como <b>Notch</b> nasceu no dia 1 de junho de 1979 em Estocolmo (Suécia). Markus Persson aos 30 anos de idade fundou a Mojang AB 
                            na qual desenvolveu o jogo mais conhecido da empresa o Minecraft. Markus Persson em novembro de 2014 deixou a Mojang pois foi vendida para a Microsoft por 2.5$ Bilhões de dólares.
                            Como Markus Persson tinha 70% d` Mojang, assim ao vender a sua empresa tornou-se bilionário. Ainda em 2014 comprou uma mansão por 70$ Milhões em Los Angeles nos EUA.</p>
                        <p align="justify">&nbsp;&nbsp;&nbsp;&nbsp;Markus Persson iniciou a sua carreira de programador em um<i> Commodore 128 <sup>(Img.2)</sup></i> com um computador pessoal quando tinha 7 anos de idade. Trabalhou até 2009 na<i><a href=https://king.com/> King.com </a></i>
                            Trabalhou como programador em um software de gerenciamento de fotografias<i> Jalbum</i>, Markus Persson também foi um dos fundadores do  MMOWurm Online (um MMORPG desenvolvido pela Code Clube AB).</p>
                        <p align="justify">&nbsp;&nbsp;&nbsp;&nbsp;Atualmente Markus Persson não tem trabalho mas também não pretende arranjar um.
                        <br><br><br><br>
                        <img title="Commodore 128" align=midle src="Commodore128.png" width=300 height=300>
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Img.2&nbsp;&nbsp;&nbsp;&nbsp;Commodore 128
                            <br><br><br>
                        <font face="Modern" size=3>
                            <!-- <hr width=100% color=black size=3 align=center> -->
                            <h3>Trabalhos de Markus Persson</h3>
                            <!-- <hr width=100% color=black size=3 align=center> -->
                        </font>
                        <ul type=circle>
                            <li><b>Jogos</b>
                                <ol><p align="justify">Markus Persson criou muitos jogos pequenos, muitos deles para competições e ainda tem muitos jogos inacabados.</p></ol></li>
                            <li><b>Minecraft</b>
                                <ol><p align="justify">O jogo que teve mais sucesso que Markus Persson criou. Acabou por vender o jogo para a Microsoft porque já não conseguia lidar com a pressão de ter criado um jogo tão grande
                                (O Terceiro jogo mais jogado do mundo). As pessoas da Mojang ficaram chateadas com ele por te-lo feito.</p></ol></li>
                            <li><b>Wurm Online</b>
                                <ol><p align="justify">Co-criado com Rolf Jansson há muitos anos atrás. Terminou por deixar o projeto quando Rolf se afastou e tornou-se mais difícil trabalharem juntos.</p></ol></li>
                            <li><b>Drowning in Problems</b>
                                <ol><p align="justify">Feito para uma competição de desenvolvimento de jogos de 48 horas com o tema "sob a superfície". Completou o jogo em menos de dez horas.</p></ol></li>
                            <li><b>Shambles</b>
                                <ol><p align="justify">Uma entrada para a competição de fps (First Person Shoter) onde o objetivo é tentar fazer um jogo de tiros em primeira pessoa em uma semana. Fez em Unity.
                                O jogo não é muito mau mas, como é um jogo de ataque de pontuação onde o jogador inevitavelmente será invadido pelo acúmulo de zumbis, isso definitivamente causa fadiga nos jogadores.</p></ol></li>
                        </ul>
                        <br><br>
                        <fieldset class="field_set">
                            <legend align="center">Opinião</legend>
                            <center><textarea cols=170 rows=20 maxlength="10000" placeholder="Deixe aqui a sua opinião..."></textarea></center>
                            <center><input type=submit value=Enviar action=""></center>         
                        </fieldset>
                        <br>
                        <center><button type=Cima><a href="#top">VOLTAR PARA O TOPO</a></button></center>
                        </font>
                        <br>

                        <div id="footer">
                        </div>

                    </div>
                </div>
            </body>
        </html>

My css code:
    /* Layout */

        #wrapper {
            width: 100%;
            overflow: auto;
            background-color: #FFFFFF;
        }

    #columnLeft {
        width: 20%;

        overflow: auto;
        background-color: #FFFFFF;
        float: left;
        min-height: 100%;
    }

    #columnRight {
        width: 20%;
        height: %;
        background-color: #FFFFFF;
        float: right;
        min-height: 100%;
    }

    #banner {
        width: 100%;
        height: 46px;
        background-color: #000000;
    }

    #content {
        width: 100%;
        height: %;
        background-color: lightblue;
    }

    #footer {
        width: 100%;
        height:75px;
        background-color: #2EFE2E;
    }

    /* Menu */

           ul.menu {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: #000000;
            }

        li {
            float: left;
        }

            li a, .dropbtn {
                display: inline-block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }

            li a:hover:not(.active), .dropdown:hover .dropbtn {
                background-color: #FE2E64;
            }

            li.dropdown {
                display: inline-block;
            }

            .dropdown-content {
                display: none;
                position: absolute;
                background-color: #000000;
                min-width: 135px;
            }

            .dropdown-content a {
                color: white;
                padding: 14px 16px;
                text-decoration: none;
                display: block;
                text-align: left;
            }

            .dropdown-content a:hover {background-color: #000000}

            .dropdown:hover .dropdown-content {
                display: block;
            }

            .active {
                background-color: #FE2E64;
            }

    /* Formatos */

        p.legenda {
            font-style: italic;
            color: #FE2E64;
        }

and this is what happends on my website: 
top page

Middle page

bottom page

A:

In the CSS for the images you can add
img{
  max-widht: 100%; //avoid to overflow the page;
  object-fit: contain; //keep proportion;
  width: 100%; //Change for each of the images how much you want them to fill the page
  float: left; //fit them with other blocks to left/right
}

