How to "glue" elements against the top of the screen

Question

I have a problem which I don't quite understand because it's counter to all that I know. So, what (I thought that) I knew was that elements are initially placed top-left, and then try to cover space inline rightwards, then downwards.

But my problem is that somehow my html-divs are glued to the bottom, behaving as if their positioning start at the bottom, then moving rightwards. Can anybody explain to me how that could be so, and what css properties could change it?

Image shows three columns of rectangles + one logo, each column represents a larger div (with the css inline-block property so as to make them appear left-to-right):

I can also give you the css + html, although it's probably going to be too much for you to search through it (I'm more trying for you to give me a general answer, so you don't have to look through all my code):

button
{
    width: 205px;
    height: 30px;
    font-size: 14px;
    font-weight: 500;
}

.bestillingstekst
{
    font-weight: 500;

}

.question
{
    font-weight: 700;
}

.psmall
{
    display: inline;
    font-style: italic;
    font-size: 13px;
    font-weight: 600;
}

.psmall2
{
    display: block;
    font-style: italic;
    font-size: 13px;
    font-weight: 600;
    margin-top: 3px;
}

.input_box
{
    width: 150px;
    display: inline-block;
    float:right;
}

.rectangledesign
{
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 18px;
    border-color: #ff3333;
    border-style: solid;
    border-width: 6px;
    padding: 5px;
}

  <form method='POST' id='form1' runat='server' autocomplete='off'>

        <div style="display: block; width: 100vw; font-family: 'Malgun Gothic'; font-weight: 400;">
        <div id="screenie">
        <div style="margin-top: 10px;">
            
            <div id="Left-div" style="display: inline-block;">

            <div id="Tjenesteinformasjon" style='width: 300px;' class="rectangledesign">
                <span style='font-size: 26px;'>Hva gjør vi?</span><br />
                    
                <p>Vi tilbyr flyttehjelp, flyttevask, varetaxi/budbil, transport og utleie av biltransporthenger!<br /><br />
                Vennligst benytt bestillingsskjema til høyre for å få et tilbud raskt og enkelt (bestilling er ikke bindende)!<br /><br />
                Ønsker du å kontakte oss manuelt, enten for bestilling, informasjon eller kundeservice, kan du også bruke kontakt- og bedriftsinformasjonen nedenfor.</p>
            </div>

            <div id="Priser" style="width: 300px;" class="rectangledesign">
                <span style='font-size: 26px;'>Prisinformasjon:</span><br />
                <p>
                    Priser avtales som en fast sum på forhånd! Du skal aldri betale mer enn denne prisen!<br />
                    <span style="color: red; font-weight: 600; font-size: 19px;">Det er viktig for oss at du er fornøyd med prisen din! Derfor kan du gi oss et tilbud i bestillingskjema til høyre! Ikke glem å fortell oss hva du ønsker!</span>
                </p>
            </div>

            <div id="Partner" style="width: 300px;" class="rectangledesign">
                <span style='font-size: 26px;'>Bli partner!</span><br />
                <p>
                    Trenger du ofte oppdrag? Eller trenger du noen til å kjøre varer og gjenstander fast? Da ønsker vi å bli partner med deg!<br /><br />
                    Kontakt Hjelpsomme Folk for mer informasjon om hvordan å sette opp partnerskap med vår bedrift!
                </p>
            </div>

             <div id="Kontaktinformasjon" style='width: 300px;' class="rectangledesign">
                <span style='font-size: 26px;'>Hvordan kontakte oss?</span><br />
                    
                <p>epost: post@hjelpsommefolk.no<br />tlf: 92 53 48 35<br/>Organisasjonsnr.: 916 043 112<br/>
                Postadresse: Nøsteveien 60, 3413 Lier<br/>Kontaktperson: Mantas Tamosiunas</p>
            </div>

            </div>

            <div id="Center-div" style="display: inline-block;">
                <div style="width: 550px;" class="rectangledesign">

                <div id="skjematype_a" style="display: block; width: 265px; height: 75px; margin-left: 120px; font-size: 11.75px; text-align: center; border-width: 3px; border-style: outset; border-color: #00e6ab;">
                    <img id="bil" src="/images/bil.jpg" onclick="changeImage()" style="width: 135px; height: 75px; float: left; padding-right: 2px;" />
                    <div id="skjematype_b">Klikk på bildet for å bytte bestillingskjema til <b>biltransporthenger.</b></div>
                </div>

                <script>
                    function changeImage()
                    {
                        var bestillingstekst = document.getElementById('bestillingstekst')
                        var bestillingstekst2 = document.getElementById('bestillingstekst2')
                        var block = document.getElementById('skjematype_a')
                        var s_text = document.getElementById('skjematype_b')
                        var image = document.getElementById('bil');
                        if (image.src.match("bil"))
                            {
                            image.src = "/images/henger.jpg"
                            s_text.innerHTML = "Klikk på bildet for å bytte bestillingskjema til <b>transport</b> og <b>flyttetjenester.</b>"
                            bestillingstekst.hidden = 'hidden'
                            bestillingstekst2.hidden = ''
                            }
                        else
                            {
                            image.src = "/images/bil.jpg";
                            s_text.innerHTML = "Klikk på bildet for å bytte bestillingskjema til <b>biltransporthenger.</b>"
                            bestillingstekst.hidden = ''
                            bestillingstekst2.hidden = 'hidden'
                            }
                    }
                </script>
                
                <div id='bestillingstekst' class='bestillingstekst'>
                    <p>
                        <span style='font-size: 26px;'>Bli kontaktet med tilbud på sms!</span><br />
                        <span style='font-style: italic;'>(tilbudet kommer normalt dagen etter)</span>
                    </p>

                    <p class='question'>Hvilke tjenester ønsker du?</p>

                        <label>Flyttehjelp<input id='fhjelp' type='checkbox' name='tjenester' runat='server'/></label>
                        <label>Flyttevask<input id='fvask' type='checkbox' name='tjenester' runat='server'/></label></>
                        <label>Transport<input id='transport' type='checkbox' name='tjenester' runat='server'/></label></>
                    

                    <p class='question'>Hvordan ønsker du å betale?</p>

                        <label>Kontant<input id='kontant' type='radio' name='betaling' runat='server'/></label></>
                        <label>Faktura<input id='faktura' type='radio' name='betaling' runat='server'/></label></>
                    
                    <p class="question">Hva synes du er en god pris for jobben?</p>
                        <div style='width: 100%; display: inline-block; text-align: left; line-height: 22px;'>
                            <label>Pris i kroner:<input class="input_box" id='pris1' type='tel' maxlength='8' runat='server'/></label>
                        </div>

                    <p class='question'>Er du privatperson eller bedrift?</p>

                        <label>Privat<input id='privat' type='radio' name='kundetype' runat='server'/></label></>
                        <label>Bedrift<input id='bedrift' type='radio' name='kundetype' runat='server'/></label></>
                    

                    <p class='question'>Hvordan kontakter vi deg?</p>

                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                        <label>Fullt personnavn<input class="input_box" id='personnavn' type='text' runat='server'/></label>
                        <br />

                        <label>Bedriftsnavn<span class='psmall'> (kun for bedrifter)</span><input class="input_box" id='bedriftsnavn' type='text' runat='server'/></label>
                        <br />

                        <label>Mobilnr.<input class="input_box" id='tlf' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Alternativt telefonnr.<input class="input_box" id='alt_tlf' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Epost<input class="input_box" id='epost' type='email' runat='server'/></label>
                        <br />
                    
                    </div>

                    <p class='question'>Hva er beste dato og tidspunkt for tjenesten(e)?</p>
                    <p class='psmall2'>(bare endr tidspunkt for tjenestene du skal ha)</p>
                    
                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 24.5px;'>
                        <label>Flyttehjelp<input class="input_box" id='fhjelp_tid' type='datetime'  value='10:00 01-01-2016' runat='server'/></label>
                        <br />

                        <label>Utflyttingsvask<input class="input_box" id='fvask_tid' type='datetime'  value='10:00 01-01-2016' runat='server'/></label>
                        <br />

                        <label>Tilflyttingsvask<input class="input_box" id='fvask_tid2' type='datetime'  value='10:00 01-01-2016' runat='server'/></label>
                        <br />

                        <label>Transport<input class="input_box" id='transport_tid' type='datetime'  value='10:00 01-01-2016' runat='server'/></label> 
                        <br />

                    </div>

                    <p class='question'>Hvor skal tjenesten(e) starte?</p>

                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                        <label>Adresse<input class="input_box" id='adresse1' type='text' runat='server'/></label>
                        <br />

                        <label>Poststed<input class="input_box" id='poststed1' type='text' runat='server'/></label>
                        <br />

                        <label>Postnr.<input class="input_box" id='postnr1' type='text' maxlength='4' runat='server'/></label>
                        <br />

                        <label>Etasje<input class="input_box" id='etasje1' type='tel' maxlength='2' runat='server'/></label>
                        <br />

                        <label>Ca. kvadratmeter <span class='psmall'>(trengs bare ved utflyttingsvask)</span><input class="input_box" id='kvadratmeter1' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Bygningstype<input class="input_box" id='bygningstype1' type='text' runat='server'/></label>
                        <br />

                        <label>Heis?</label>
                        <div style='display: inline-block; float:right;'>
                            <label>Ja<input id='heisja1' type='radio' name='heis1' runat='server'/></label>
                            <label>Nei<input id='heisnei1' type='radio' name='heis1' class='radioleft' runat='server'/></label>
                        </div>
                        <br />

                    </div>
                        
                    <p class='question'>Hvor skal tjenesten(e) avslutte(s)?</p>
                    <p class='psmall2'>(ikke fyll inn viss kun utflyttingsvask)</p>

                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                        <label>Adresse<input class="input_box" id='adresse2' type='text' runat='server'/></label>
                        <br />

                        <label>Poststed<input class="input_box" id='poststed2' type='text' runat='server'/></label>
                        <br />

                        <label>Postnr.<input class="input_box" id='postnr2' type='text' maxlength='4' runat='server'/></label>
                        <br />

                        <label>Etasje<input class="input_box" id='etasje2' type='tel' maxlength='2' runat='server'/></label>
                        <br />

                        <label>Ca. kvadratmeter <span class='psmall'>(trengs bare ved tilflyttingsvask)</span><input class="input_box" id='kvadratmeter2' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Bygningstype<input class="input_box" id='bygningstype2' type='text' runat='server'/></label>
                        <br />

                        <label>Heis?</label>
                        <div style='display: inline-block; float:right;'>
                            <label>Ja<input id='heisja2' type='radio' name='heis2' runat='server'/></label>
                            <label>Nei<input id='heisnei2' type='radio' name='heis2' class='radioleft' runat='server'/></label>
                        </div>
                        <br />

                    </div>
                        
                    <p class='question'>Hva ønsker du fraktet (og annet vi bør vite)?</p>
                    <textarea id='textarea1' rows='6' cols='32' spellcheck='False' name='S1' runat='server'>Du behøver ikke skrive noe her viss du ikke trenger det...</textarea><br />
                    <button style='margin-top: 2px;' id='Button2' form='form1' type='submit' onserverclick='sendemail' runat='server'>Kontakt meg med et tilbud!</button>
                </div>

                <div hidden="hidden" id='bestillingstekst2' class='bestillingstekst'>
                
                     <p>
                        <span style='font-size: 26px;'>Bli kontaktet med tilbud på sms!</span><br />
                        <span style='font-style: italic;'>(tilbudet kommer normalt dagen etter)</span>
                    </p>

                    <p class='question'>Hvordan ønsker du å betale?</p>

                        <label>Kontant<input id='leie_kontant' type='radio' name='betaling' runat='server'/></label></>
                        <label>Faktura<input id='leie_faktura' type='radio' name='betaling' runat='server'/></label></>

                    <p class="question">Hva synes du er en god pris for leie?</p>
                    <p class='psmall2'>(fastpriser inntil 1 døgn: 300kr/400kr/500kr under 4/8/24 timer)</p>
                        <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                            <label>Pris i kroner:<input class="input_box" id='pris2' type='tel' maxlength='8' runat='server'/></label>
                        </div>
                
                    <p class='question'>Er du privatperson eller bedrift?</p>

                        <label>Privat<input id='leie_privat' type='radio' name='kundetype' runat='server'/></label></>
                        <label>Bedrift<input id='leie_bedrift' type='radio' name='kundetype' runat='server'/></label></>
                    

                    <p class='question'>Hvordan kontakter vi deg?</p>

                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                        <label>Fullt personnavn<input class="input_box" id='leie_personnavn' type='text' runat='server'/></label>
                        <br />

                        <label>Bedriftsnavn<span class='psmall'> (kun for bedrifter)</span><input class="input_box" id='leie_bedriftsnavn' type='text' runat='server'/></label>
                        <br />

                        <label>Mobilnr.<input class="input_box" id='leie_tlf' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Alternativt telefonnr.<input class="input_box" id='leie_alt_tlf' type='tel' maxlength='8' runat='server'/></label>
                        <br />

                        <label>Epost<input class="input_box" id='leie_epost' type='email' runat='server'/></label>
                        <br />
                    
                    </div>

                    <p class='question'>Når ønsker du å leie?</p>
                    
                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 24.5px;'>
                        <label>Leiestart<input class="input_box" id='leiestart' type='datetime-local'  value='2020-01-01T10:00:00' runat='server'/></label>
                        <br />

                        <label>Leieslutt<input class="input_box" id='leieslutt' type='datetime-local'  value='2020-01-01T10:00:00' runat='server'/></label>
                        <br />

                    </div>

                    <p class='question'>Hva er adressen din?</p>

                    <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
                        <label>Adresse<input class="input_box" id='leie_adresse' type='text' runat='server'/></label>
                        <br />

                        <label>Poststed<input class="input_box" id='leie_poststed' type='text' runat='server'/></label>
                        <br />

                        <label>Postnr.<input class="input_box" id='leie_postnr' type='text' maxlength='4' runat='server'/></label>
                        <br />

                    </div>

                    <p class='question'>Noe mer vi bør vite?</p>
                    <textarea id='textarea2' rows='6' cols='32' spellcheck='False' name='S1' runat='server'>Du behøver ikke skrive noe her viss du ikke trenger det...</textarea><br />
                    <button style='margin-top: 2px;' id='Button1' form='form1' type='submit' onserverclick='sendemail2' runat='server'>Kontakt meg med et tilbud!</button>
                </div>

                </div>
            </div>

            <div id="Right-div" style="display: inline-block;">
            
            <img style="width: 315px; height: 245px;" src='/images/logo.jpg'/ alt='logo'/>

            <div id="Finn" style='width: 300px; text-align: center; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;'>
                <p style="font-size: 16px; font-style: italic;">Se våre finn.no referanser i linken under! <a href="http://www.finn.no/smajobber/profiler/510702027/">http://www.finn.no/smajobber...</a></p>
                <img  style="" src='/images/finn1.PNG'/>
                <img  style="" src='/images/finn2.PNG'/>
                <img  style="" src='/images/finn3.PNG'/>
            </div>

            <div id="Trygghet" style="width: 300px;" class="rectangledesign">
                <span style='font-size: 26px;'>Trygghet!</span><br />
                    
                <p>Når man har noe så billige som oss, kan det være lett å tro at det er <i>for</i> billig.<br />
                    For oss er dette <i>ikke</i> sant! Vi tror at <b>trygghet</b>, <b>god kundeservice</b> og <b>gode priser</b> hører sammen!<br /><br />

                    Hos Hjelpsomme Folk skal du alltid føle deg trygg på at vi viser <b>respekt</b>, <b>nøyaktighet</b> og <b>forsiktighet</b> når vi behandler dine eiendeler!<br /><br />

                    Vi vil alltid ta ekstra godt vare på gjenstandene dine når disse skal fraktes, og har som regel å pakke dem inn i bobleplast for å fjerne muligheten for transportskader!<br /><br />
                    Hva tror du? Skal kvalitetsarbeide følge sammen med lave priser?</p>
            </div>

            <div id="Facebook" style="width: 300px;" class="rectangledesign">
                <h4 style="font-style: italic;">
                    Liker du oss? Vis det her! <3
                </h4>

                <div class="fb-like" data-href="http://hjelpsommefolk.no" data-width="100" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
                <br />
                <div class="fb-comments" data-href="http://hjelpsommefolk.no" data-width="275" data-numposts="6"></div>
            </div>

            </div>

            </div>
            </div>
            </div>

        <script type="text/javascript">
                var rightdiv = parseInt(document.getElementById('Right-div').offsetWidth);
                var centerdiv = parseInt(document.getElementById('Center-div').offsetWidth);
                var leftdiv = parseInt(document.getElementById('Left-div').offsetWidth);

                var combined_rect_width = rightdiv + centerdiv + leftdiv + 40;

                var int_screeniemargin = (window.innerWidth * 0.5) - (combined_rect_width * 0.5);

                var string_screeniemargin = int_screeniemargin + "px";
                
                document.getElementById('screenie').style.marginLeft = string_screeniemargin;
            </script>
    </form>

Answer 1

Add vertical-align: top to Left-div and Right-div.