Please help me solve CSS positioning problem

HTML = 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <div id="votingwindow">
            <div class="votequestion">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex architecto iusto totam sed id asperiores. Laboriosam et officiis doloremque dolorum!</div>
            <button id="voteanswer1" onclick="button1()"><div id="moveBoxOne"></div>Answer1</button>
            <button id="voteanswer2" onclick="button2()">Answer2</button>
            <button id="voteanswer3" onclick="button3()">Answer3</button>
            <button id="voteanswer4" onclick="button4()">Answer4</button>

        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
CSS =
.main {
    width: 100vw;
    height: 100vh;
    background-color: #1f5673;
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
#votingwindow {
    width: 500px;
    height: 400px;
    background-color: #d4cdf4;
    
}
.votequestion {
    background-color: #6290c3;
    width: 99%;
    height: 20%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#voteanswer1 {
    background-color: #b5e2fa;
    width: 88%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2%;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
}
#voteanswer2 {
    background-color: #b5e2fa;
    width: 88%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2%;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}
#voteanswer3 {
    background-color: #b5e2fa;
    width: 88%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2%;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}
#voteanswer4 {
    background-color: #b5e2fa;
    width: 88%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2%;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}

#moveBoxOne {
    width: 200px;
    height: 100px;
    background-color: darkgoldenrod;
}
JS =



var clicks1 = 0;
var clicks2 = 0;
var clicks3 = 0;
var clicks4 = 0;


var rel1;
var rel2;
var rel3;
var rel4;
var sumOfVotes;
var onePercent;

function button1() {
    
    clicks1 += 1;
    sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
    onePercent = sumOfVotes / 100;
    rel1 = Math.round((clicks1 / onePercent)*100)/100;
    rel2 = Math.round((clicks2 / onePercent)*100)/100;
    rel3 = Math.round((clicks3 / onePercent)*100)/100;
    rel4 = Math.round((clicks4 / onePercent)*100)/100;
    
    document.getElementById("voteanswer1").innerHTML = clicks1 + " votes    " + rel1 + "%";
    document.getElementById("voteanswer2").innerHTML = clicks2 + " votes    " + rel2 + "%";
    document.getElementById("voteanswer3").innerHTML = clicks3 + " votes    " + rel3 + "%";
    document.getElementById("voteanswer4").innerHTML = clicks4 + " votes    " + rel4 + "%";
}
function button2() {
    
    clicks2 += 1;
    sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
    onePercent = sumOfVotes / 100;
    rel1 = Math.round((clicks1 / onePercent)*100)/100;
    rel2 = Math.round((clicks2 / onePercent)*100)/100;
    rel3 = Math.round((clicks3 / onePercent)*100)/100;
    rel4 = Math.round((clicks4 / onePercent)*100)/100;
    document.getElementById("voteanswer1").innerHTML = clicks1 + "votes    " + rel1 + "%";
    document.getElementById("voteanswer2").innerHTML = clicks2 + "votes    " + rel2 + "%";
    document.getElementById("voteanswer3").innerHTML = clicks3 + "votes    " + rel3 + "%";
    document.getElementById("voteanswer4").innerHTML = clicks4 + "votes    " + rel4 + "%";
}
function button3() {
    
    clicks3 += 1;
    sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
    onePercent = sumOfVotes / 100;
    rel1 = Math.round((clicks1 / onePercent)*100)/100;
    rel2 = Math.round((clicks2 / onePercent)*100)/100;
    rel3 = Math.round((clicks3 / onePercent)*100)/100;
    rel4 = Math.round((clicks4 / onePercent)*100)/100;    
    document.getElementById("voteanswer1").innerHTML = clicks1 + "votes    " + rel1 + "%";
    document.getElementById("voteanswer2").innerHTML = clicks2 + "votes    " + rel2 + "%";
    document.getElementById("voteanswer3").innerHTML = clicks3 + "votes    " + rel3 + "%";
    document.getElementById("voteanswer4").innerHTML = clicks4 + "votes    " + rel4 + "%";
}
function button4() {
    
    clicks4 += 1;
    sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
    onePercent = sumOfVotes / 100;
    rel1 = Math.round((clicks1 / onePercent)*100)/100;
    rel2 = Math.round((clicks2 / onePercent)*100)/100;
    rel3 = Math.round((clicks3 / onePercent)*100)/100;
    rel4 = Math.round((clicks4 / onePercent)*100)/100;  
    document.getElementById("voteanswer1").innerHTML = clicks1 + "votes    " + rel1 + "%";
    document.getElementById("voteanswer2").innerHTML = clicks2 + "votes    " + rel2 + "%";
    document.getElementById("voteanswer3").innerHTML = clicks3 + "votes    " + rel3 + "%";
    document.getElementById("voteanswer4").innerHTML = clicks4 + "votes    " + rel4 + "%";
}


Hi everyone.
I m building a web page voting box, as in news papers web pages where people get asked what they think about a certain thing, with a few answers that they can click.
After one clicks, the inside of the answer box changes: the voting results of the other people are shown.
The voting results are shown proportionally in percentage.
Doing it that way, I not only want a calculus in my JS to show the % results in each box ( which I did fine ), but, to make this look nice, I also want the clicked button bar ( small height, long width ) to get, proportionally to the percentage of the votes, filled with A NEW COLOR Div from left to right.
So, I made a new Div inside the Button Tag, I gave it a new bg-color.
Made the Button Div overflow hidden, which is all nice.
Here comes the problem: the new colored Div is kinda positioning itself to the Text inside the Button Div, and WORSE: it wont move UNDER the text but start pushing it.
You get the picture here ?
Text is in mid of Button Div, new color Div, when reaches about 50%(mid) wont move under the Text, without moving the text whatsover. It sees the text as equal.

Sorry for your peoples time. I m kinda new to web dev. There are a few things I know already but sometimes I get stucked at the very basics because of luck of practice.

Any suggestions would be appreciated.
You people have a good day.

thank you for the detailed question, can you also provide the code you are asking about?

Don’t know if this is what you wanted to see, but here you go…

<button id="voteanswer1" onclick="button1()"><div id="moveBoxOne"></div>Answer1</button>
#voteanswer1 {

    background-color: #b5e2fa;

    width: 88%;

    height: 15%;

    margin-left: auto;

    margin-right: auto;

    margin-top:2%;

    margin-bottom: auto;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 20px;

    overflow: hidden;

}
#moveBoxOne {

    width: 25px;

    height: 100px;

    background-color: darkgoldenrod;

}

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

you have not provided enough code to see the issue you are describing. Do you have a codepen or something similar where you can show the issue?

First come code, surrounded by lines of 3 backticks.
Got it !

how do I delete this post ?

there is a policy of no duplicate posts on this forum, also as I already said

only mods can delete posts,to ask for deletion you can flag the first post in the topic

you can also edit the first post here instead of opening a new topic

I’m trying to help you if you please answer my question

Got it !
Easier to correct this post, which I did.
Thank you for your help.
Are you a real person or bot ?

I’m a real person, and as you are not answering my question, good luck with your code, I hope you find someone that can help you

Only mods can delete posts, got it !
Better to edit previous one than delete and recreate new, got it !
First come code surrounded by lines of 3 backticks, as shown in visual, got it !

“not enough code” ok, got you. Will take a bit to figure out what is “necessary code”.

Thank you for your attention

HTML = 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <div id="votingwindow">
            <div class="votequestion">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex architecto iusto totam sed id asperiores. Laboriosam et officiis doloremque dolorum!</div>
            <button id="voteanswer1" onclick="button1()"><div id="moveBoxOne"></div>Answer1</button>
            <button id="voteanswer2" onclick="button2()">Answer2</button>
            <button id="voteanswer3" onclick="button3()">Answer3</button>
            <button id="voteanswer4" onclick="button4()">Answer4</button>

        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
CSS =
.main {
    width: 100vw;
    height: 100vh;
    background-color: #1f5673;
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
#votingwindow {
    width: 500px;
    height: 400px;
    background-color: #d4cdf4;
    
}
.votequestion {
    background-color: #6290c3;
    width: 99%;
    height: 20%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#voteanswer1 {
    background-color: #b5e2fa;
    width: 88%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2%;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
}
#voteanswer2 {
    background-color: #b5e2fa;
    width: 88%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2%;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}
#voteanswer3 {
    background-color: #b5e2fa;
    width: 88%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2%;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}
#voteanswer4 {
    background-color: #b5e2fa;
    width: 88%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2%;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}

#moveBoxOne {
    width: 200px;
    height: 100px;
    background-color: darkgoldenrod;
}
JS =



var clicks1 = 0;
var clicks2 = 0;
var clicks3 = 0;
var clicks4 = 0;


var rel1;
var rel2;
var rel3;
var rel4;
var sumOfVotes;
var onePercent;

function button1() {
    
    clicks1 += 1;
    sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
    onePercent = sumOfVotes / 100;
    rel1 = Math.round((clicks1 / onePercent)*100)/100;
    rel2 = Math.round((clicks2 / onePercent)*100)/100;
    rel3 = Math.round((clicks3 / onePercent)*100)/100;
    rel4 = Math.round((clicks4 / onePercent)*100)/100;
    
    document.getElementById("voteanswer1").innerHTML = clicks1 + " votes    " + rel1 + "%";
    document.getElementById("voteanswer2").innerHTML = clicks2 + " votes    " + rel2 + "%";
    document.getElementById("voteanswer3").innerHTML = clicks3 + " votes    " + rel3 + "%";
    document.getElementById("voteanswer4").innerHTML = clicks4 + " votes    " + rel4 + "%";
}
function button2() {
    
    clicks2 += 1;
    sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
    onePercent = sumOfVotes / 100;
    rel1 = Math.round((clicks1 / onePercent)*100)/100;
    rel2 = Math.round((clicks2 / onePercent)*100)/100;
    rel3 = Math.round((clicks3 / onePercent)*100)/100;
    rel4 = Math.round((clicks4 / onePercent)*100)/100;
    document.getElementById("voteanswer1").innerHTML = clicks1 + "votes    " + rel1 + "%";
    document.getElementById("voteanswer2").innerHTML = clicks2 + "votes    " + rel2 + "%";
    document.getElementById("voteanswer3").innerHTML = clicks3 + "votes    " + rel3 + "%";
    document.getElementById("voteanswer4").innerHTML = clicks4 + "votes    " + rel4 + "%";
}
function button3() {
    
    clicks3 += 1;
    sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
    onePercent = sumOfVotes / 100;
    rel1 = Math.round((clicks1 / onePercent)*100)/100;
    rel2 = Math.round((clicks2 / onePercent)*100)/100;
    rel3 = Math.round((clicks3 / onePercent)*100)/100;
    rel4 = Math.round((clicks4 / onePercent)*100)/100;    
    document.getElementById("voteanswer1").innerHTML = clicks1 + "votes    " + rel1 + "%";
    document.getElementById("voteanswer2").innerHTML = clicks2 + "votes    " + rel2 + "%";
    document.getElementById("voteanswer3").innerHTML = clicks3 + "votes    " + rel3 + "%";
    document.getElementById("voteanswer4").innerHTML = clicks4 + "votes    " + rel4 + "%";
}
function button4() {
    
    clicks4 += 1;
    sumOfVotes = clicks1 + clicks2 + clicks3 + clicks4;
    onePercent = sumOfVotes / 100;
    rel1 = Math.round((clicks1 / onePercent)*100)/100;
    rel2 = Math.round((clicks2 / onePercent)*100)/100;
    rel3 = Math.round((clicks3 / onePercent)*100)/100;
    rel4 = Math.round((clicks4 / onePercent)*100)/100;  
    document.getElementById("voteanswer1").innerHTML = clicks1 + "votes    " + rel1 + "%";
    document.getElementById("voteanswer2").innerHTML = clicks2 + "votes    " + rel2 + "%";
    document.getElementById("voteanswer3").innerHTML = clicks3 + "votes    " + rel3 + "%";
    document.getElementById("voteanswer4").innerHTML = clicks4 + "votes    " + rel4 + "%";
}
        

Here is full code,
you get the picture ?
That new div colored bar, which i trough JS will later move within the button box properly, I want it to not influence the text that is inside the button div , but rather move beneath it, coming from left going to the right.

Thx once more

You can move the text before the box and set the flex-direction to column. I doubt just having the content stacked will give you what you want in the end but I guess it’s a start.

Also, a div element is not valid content for a button, you can use a span (or other Phrasing content but no Interactive content)

<button id="voteanswer1" onclick="button1()">
  Answer1
  <span id="moveBoxOne"></span>
</button>
#voteanswer1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

BTW, you have a lot of duplicate code in your JS.