HTML div location - html

Question

I am now learning HTML and I have put a relative div in my code.
There are 2 more divs before that one but they don't collide, sadly the first two still take space above the relative one and I want it to be on top of the page.
My code :
.foo {
font-family: 'Tahoma';
font-size: 30px;
color: #fff;
background-color: black;
height: 180px;
width: 280px;
text-align: center;
position:relative;
left:540px;
border:5px solid #fff;
top:-50px;
}
.lastpage {
position:relative;
text-align:left;
width:20%;
}
.index {
position:relative;
text-align:left;
width:20%;
}
body {
background-color:lightgray;
text-align:center;
align-content:center;
color: #990099;
font-family: 'Tahoma';
font-size: 15px;
}
<div class="foo">
<br><br>F O O - B A R
</div>
<div class="lastpage">
<form method=get action="http://www.boomy.web44.net/CURRY.html/">
<button type="submit">Last Page</button>(2/2)
</form>
</div>
<div class="index">
<form method=get action="http://www.boomy.web44.net//">
<button type="submit">Index</button>
</form>
</div>
I want the "Foo bar" div to go up and be on the same level as the two buttons

Answer 1

I changed your CSS code :
.foo
{
float:right;
margin-right: 540px;
font-family: 'Tahoma';
font-size: 30px;
color: #fff;
background-color: black;
height: 180px;
width: 280px;
text-align: center;
position:relative;
border:5px solid #fff;
top:-50px;
}
.lastpage
{
position:relative;
text-align:left;
width:20%;
float:left;
}
.index
{
float:left;
position:relative;
text-align:left;
width:20%;
}
I added float:right and margin-right to your foo class and float:left to your lastpage and index class.
I think it should work for you !

Answer 2

Try adding the display: inline-block rule to make the divs appear on the same line, or float. By default, a div is block display and two divs won't come on the same line.
Another way of doing this is using the float: left property on the lastpage div to make it stay to the left and align it and the other div on the same line.
Does this solve your problem?