HTML div location

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?