How to add floating back and next buttons to content div? - html

Question

The template I am working with has a container, with content and navigation divs. The code looks something like this:
<div id="user_content" class="user_content">
<div class="main_content"> some content, text and whatever else, can be pretty long!</div>
<div class="content_nav">
<div class="col-md-3"><a id="prevB" href="http://google.com">CLICK HERE TO GO BACK!</a></div>
<div class="col-md-3"><a id="nextB" href="http://yahoo.com">CLICK HERE TO GO NEXT!</a></div>
</div>
</div>
See Figure 1 below for drawing.
Relevant CSS for the main_content div:
.main_content {
position: relative;
left: 0px;
width: 100%;
display: block;
transition: transform 0.5s ease 0s;
height: auto;
}
I can change the PHP to generate the BACK and NEXT links without its own div, so it will look like this:
<div id="user_content" class="user_content">
<a id="prevB" href="http://google.com">CLICK HERE TO GO BACK!</a>
<div class="main_content"> some content, text and whatever else, can be pretty long!</div>
<a id="nextB" href="http://yahoo.com">CLICK HERE TO GO NEXT!</a>
</div>
</div>
What I don't understand is the proper CSS to make the <a> BACK and NEXT links to be on the left and right side of the main_content container. See Figure 2 below for drawing.
Here is a link to the JFIDDLE that I've tried: https://jsfiddle.net/7wet25zn/

Answer 1

Position absolute your anchors at top 50% and subtract 0.5em (half the font-size, or any other value):
.user_content {
position: relative;
background: #eee;
height: 160px;
}
.user_content a {
position: absolute;
top: calc(50% - 0.5em);
}
.user_content a.next {
right: 0;
}
<div class="user_content">
<div class="main_content"></div>
<a class="prev" href="#!">PREV</a>
<a class="next" href="#!">NEXT</a>
</div>

Answer 2

If your {content} part is tall and prev and next button should be in the middle of the viewport (not tall div), you may add display:block; position:fixed; top:50%; to prev and next links so it will be visible regardless of height of div.

Answer 3

I recently experienced a similar problem building tooltips on a page. It wasn't something I had encountered before and wanted to do it with HTML and CSS. What ended up working for me was defining a parent container and making the content you want floating like so:
<div class="parent-container">
<div class="child"></div>
<div class="child"></div>
</div>
And defining the CSS as such:
.parent-container {
position: relative;
}
.child {
position: absolute;
}
This allows you to set width and height on the child class as relative to the position of the parent container. Good luck!