Buttons not aligning HTML/CSS - html

Question

I have a problem with the buttons on my webpage.
This is what they look like when I enter fullscreen
When I click next, and go back to this same page it then turns into this
I tried no matter what I try they always end up not aligned when I click next and go back to this same page.
The style of the buttons
.button1{
bottom: -70px;
right:0px;
position: absolute;
}
.button2{
bottom: 28px;
left:8px;
position: absolute;
}
The buttons
</div>
<div class="button1">
<button type="submit" name="Next">Next</button>
</div>
</form>
<form action="Time.html">
<div class="button2">
<button type="submit" name="Next">Back</button>
</div>
</form>
Also you can see that they don't belong in the same form.
The form where Next button belongs
.form1 {
border: 8px solid #7B93F4;
left:0;
position: absolute;
top: 43%;
width: 98.9%;
text-align:center;
}
Any idea on how can I fix this and prevent this from happening?

Answer 1

You could change the layout a bit, floating the buttons:
.cont {
overflow: hidden;
}
.button1{
float: left;
}
.button2{
float: right;
}
<div class="cont">
<button class="button1">button1</button>
<button class="button2">button2</button>
</div>
Floating is more flexible then position absolute.

Answer 2

There is an error with your HTML code. Edit it so that it'll be clear.
The two buttons are contained in different form elements which are stacked on top of themselves because they are block elements. Put them in the same form element and use the style below.
You should avoid positioning absolutely when you can. I'll suggest you float the buttons instead.
Your HTML might look something like this
<form>
<div class="button1">
<button type="submit" name="Next">Next</button>
</div>
<div class="button2">
<button type="submit" name="Next">Back</button>
</div>
</form>
and your CSS like this
.form1 {
/* your other codes */
overflow: auto;
}
.button1{
float: left;
}
.button2{
float: right;
}
Hope it works.