Positioning circle and line together for timeline - html

Question

I would like to implement timeline part on my website.
I have picture how it should look but I can't think any good way to do it.
How it should look:
Actual code:
js fiddle
<div class="right ">
what should I put here to get that circle?
</div>
Most confusing part is how to get that circle and that line together?
Could anyone suggest anything?
Thank you.

Answer 1

You could use :after, changing the styles to your liking.
.border needs to be positioned non-statically.
.wrapper {
width: 1030px;
background-color: #534741;
height: 500px;
}
.right {
color: #fff;
width: 90%;
text-align: right;
padding: 10px 10px 0 0;
display: block;
}
.border {
border-bottom: 2px solid #000;
width: 50%;
float: right;
margin: 10px 140px 0 10px;
position: relative;
}
.border:after {
/* Position and border */
display: block;
content: '';
border: 2px solid #000;
position: absolute;
width: 32px;
right: -34px; /*** -(Width+Border) ***/
height: 32px;
bottom: -18px; /*** -((Height/2)+Border) ***/
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.text {
float: right;
width: 300px;
margin-right: 90px;
}
<div class="wrapper">
<div class="right">
<h2>Text</h2>
</div>
<div class="right">
<h3>2014</h3>
</div>
<div class="right "></div>
<div class="right border"></div>
<div class="right text">
<p>Lorem ipsum doloremLorem ipsum doloremLorem ipsum doloremLorem ipsum doloremLorem ipsum dolorem</p>
</div>
</div>
JSFiddle

Answer 2

Try to make it with positioning and borer radius. Or simply use images.
.content-wrapper {
position: relative;
width: 400px;
margin-bottom: 30px;
}
.line .circle {
width: 50px;
height: 50px;
border-radius: 25px;
border: 1px solid black;
position: absolute;
top: -25px;
}
.line {
position: relative;
border-bottom: 1px solid black;
}
.odd .line {
margin-right: 50px;
}
.even .line {
margin-left: 50px;
}
.odd .circle {
right: -50px;
}
.even .circle {
left: -50px;
}
.content,
.header {
padding: 0 60px;
}
.odd .content,
.odd .header {
text-align: right;
}
.even .content,
.even .header {
text-align: left;
}
<div class="content-wrapper odd">
<div class="header">Some title</div>
<div class="line">
<div class="circle"></div>
</div>
<div class="content">Loerm ipsum dolerom</div>
</div>
<div class="content-wrapper even">
<div class="header">Some title</div>
<div class="line">
<div class="circle"></div>
</div>
<div class="content">Loerm ipsum dolerom</div>
</div>

Answer 3

Below code should work:
.box-with-circle {
width: 90%;
position: relative;
}
.box-with-circle .circle {
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
margin -20px 0 0 -20px;
border: 1px solid #000;
background-color: #fff;
z-index: 1;
border-radius: 50%;
}
.box-with-circle hr {
position: relative;
top: 20px;
}
<div class="box-with-circle">
<div class="circle"></div>
<hr />
</div>