DIV Randomly Moves Around

Question

When I load my page, one DIV on my page floating right will sometimes be moved down. When I refresh the page, it usually goes back to normal, but if I spam the refresh key, ever so often it will get moved down again.

Here is my HTML, where #users_area is where I'm having the problem:

<!-- Main Window -->
    <div id="container">
        <img src="images/saay_title.png" id="saay_title"/>
        <div class="areas" id="chat_area">
        </div>
        <div class="areas" id="users_area">
        </div>
        <form><textarea class="areas" id="type_area" placeholder="Chat..."></textarea></form>
        <input type="button" value="Send" id="submit">
    </div>
</body>
</html>

Here is my CSS with most of the styling properties excluded:

/* Global */

body, html {
/* Settings */
    margin: 0%;
    padding: 0%;
}

#container {
/* Settings */
    width: 90%;
    margin: auto;
    margin-top: 1%;
    margin-bottom: 1%;
    padding: 1%;
}

#saay_title {
/* Settings */
    width: 10%;
    display: block;
    margin: auto;
    padding: 1%;
}

/* Chat Page */

.areas {
/* Settings */
    display: inline-block;
    padding: 1%;
}

#chat_area {
/* Settings */
    width: 70%;
    height: 8em;
    margin-bottom: 1%;
}

#type_area {
/* Settings */
    width: 70%;
    height: 4em;
    resize: none;
}

#users_area {
/* Settings */
    width: 20%;
    height: 8em;
    float: right;
    margin-bottom: 1%;
}

#submit {
    /* Settings */
        -webkit-user-select: none;
    cursor: pointer;
    display: inline-block;
    margin-top: 1%;
    padding:
}

Note: Sorry, this is my first post here at Stack Overflow and I'm relatively new to programming. Maybe you'd like to suggest how I can format my post better or shorten it better. ;)

Answer 1

Which browser are you talking about? Different browsers behave different.

If I would guess, you probably have a problem with rounding errors. Try working with absolute units first (px, em, ...) instead of %, if that cures your problem, it's probably a rounding error.

Simple example so you get what I mean:

3 divs floating with width 33.3% - mathematically they add up to 99.9% so everything should be fine. But some browsers (older IE for example) compute the 33% first before doing layout, so if you got 20px, you get 6.66px * 3, which would be rounded to 7px, and 7px * 3 = 21px.

How to fix the problem: 1. work in absolute units 2. look into responsive design and work in absolute units (this way you can get at least some sizing) 3. use tables (fine even in html5 if you make them "representational") 4. only have it working in some browsers 5. recompute size per javascript 6. use flex-box ...