I have a div which is in the exact center of the and has the half length and width of the page, I have 2 links that I want to be sticked to the bottom of the div and remain visible (like position: fixed) whether in a desktop view or the mobile view.

here is the markup:

```
<div id="box2" class="box">
            <span class="head">
                Something about you:
            </span>
            <span class="main">

            </span>
            <span class="bottom">
                <a type="button" class="nxt">Next</a>
                <a type="button" class="prv">Previous</a>
            </span>

```

and here is the css I tried:

```
    .box {
    position: absolute;
    width: 50%;
    background-color: white;
    height: 500px;
    text-align: center;
    border: 3px solid black;
    left: 50%;
    top: 100px;
    margin-left: -25%;
    overflow: auto;
}
.box .bottom{
    display: block;
    max-width: 100%;
    overflow: auto;
    color: black;
    padding: 10px;
    position: relative;
    bottom: 0px;

}
.box .bottom .nxt{
    float: right;
    cursor: pointer;
    color: #0088CC;
}
.box .bottom .prv{
    float: left;
    cursor: pointer;
    color: #0088CC;
}

```

I do not want anything (head or main span) to disturb the position of the "bottom" span, But can't get the needed result, not even close. Please help