How do I reposition 3 divs that are overlaying - html

Question

I have 3 divs with anchor tags nested in them. I am trying to reposition them so that they are inline side by side evenly spaced from each other. No matter what I try they just end up overlaying on top each other.
Here is my CSS code
.links {
width: 35%;
text-align: center;
border: solid 1px;
background-color: #02b316;
margin: 5px;
position: absolute;
}
.absolute {
text-decoration: none;
color: white;
font-size: 11px;
}
.link-container {
padding-left: 5px;
padding-right: 5px;
}
h4 {
font-size: 18px;
margin: 10px;
}
p {
font-size: 14px;
}
Here is my HTML
<div class="links">
<div class="link-container">
<a class="absolute" href="#">
<h4>Lorem Ipsum</h4>
<hr>
<p>
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
</p>
</a>
</div>
</div>
<div class="links">
<div class="link-container">
<a class="absolute" href="#">
<h4>Lorem Ipsum</h4>
<hr>
<p>
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
</p>
</a>
</div>
</div>
<div class="links">
<div class="link-container">
<a class="absolute" href="#">
<h4>Lorem Ipsum</h4>
<hr>
<p>
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
</p>
</a>
</div>
</div>

Answer 1

You want to use a flex-box so it's responsive. Here is an example. :)
.container {
display: flex;
flex-wrap: wrap;
}
.links {
flex: 1;
text-align: center;
border: solid 1px;
background-color: #02b316;
margin: 5px;
}
.absolute {
text-decoration: none;
color: white;
font-size: 11px;
}
.link-container {
padding-left: 5px;
padding-right: 5px;
}
h4 {
font-size: 18px;
margin: 10px;
}
p {
font-size: 14px;
}
<div class="container">
<div class="links">
<div class="link-container">
<a class="absolute" href="#">
<h4>Lorem Ipsum</h4>
<hr>
<p>
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
</p>
</a>
</div>
</div>
<div class="links">
<div class="link-container">
<a class="absolute" href="#">
<h4>Lorem Ipsum</h4>
<hr>
<p>
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
</p>
</a>
</div>
</div>
<div class="links">
<div class="link-container">
<a class="absolute" href="#">
<h4>Lorem Ipsum</h4>
<hr>
<p>
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
</p>
</a>
</div>
</div>
</div>

Answer 2

<style>
.container {
padding: 10px
}
.content1 {
margin-left: 0px;
height: 90px;
width: 24%
background: #ddd;
}
.content2 {
background: #3ce223;
height: 90px;
width: 24%;
float: center; /*if that doesn't work than replace it with this: margin-left: 500px; */
}
.content3 {
background: #3dn210o;
height: 90px;
width: 24%;
float: right; /*if that doesn't work than replace it with this: margin-left: 1000px; or at least until it is right of the screen */
}
</style>
<div class="container">
<div class="content1">
</div>
<div class="content2">
</div>
<div class="content3">
</div>
</div>
If none of that works please comment and I will address the issue

Answer 3

Try this out.
.container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.links {
width: 35%;
text-align: center;
border: solid 1px;
background-color: #02b316;
margin: 5px;
}
.absolute {
text-decoration: none;
color: white;
font-size: 11px;
}
.link-container {
padding-left: 5px;
padding-right: 5px;
}
h4 {
font-size: 18px;
margin: 10px;
}
p {
font-size: 14px;
}
<div class="container">
<div class="links">
<div class="link-container">
<a class="absolute" href="#">
<h4>Lorem Ipsum</h4>
<hr>
<p>
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
</p>
</a>
</div>
</div>
<div class="links">
<div class="link-container">
<a class="absolute" href="#">
<h4>Lorem Ipsum</h4>
<hr>
<p>
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
</p>
</a>
</div>
</div>
<div class="links">
<div class="link-container">
<a class="absolute" href="#">
<h4>Lorem Ipsum</h4>
<hr>
<p>
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
</p>
</a>
</div>
</div>
</div>

Answer 4

The div element is displayed as a block element by default, display: block in code. This has to be changed.
The given position: absolute makes all the elements appear at the same spot.
On top of this the blocks including their added margins and paddings do not fit on the whole width of the page. This also needs adjustments.
Change your css .links and .link-container declarations:
.links {
width: 30%;
text-align: center;
border: solid 1px;
background-color: #02b316;
margin: 1%;
position: relative;
display: inline-block;
}
.link-container {
padding-left: 1%;
padding-right: 1%;
}