Div Next To Circle - css

Question

<article style="max-width:500px;" class="post" id="post-<?php the_ID(); ?>">
<div class="circle">
<div class="month"><?php the_time(d) ?></div>
<div class="year"><?php the_time('M Y');?></div>
</div>
<div class="thot">
<h4><?php the_title(); ?></h4>
<?php the_excerpt('Read More'); ?>
<hr />
</div>
</article>
<style>
.circle {
height: 165px;
width: 165px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: white;
color:black;
line-height:35px;
}
.month{
font-size:60px;
font-weight:bold;
}
.year{
font-size:20px;
}
</style>
What is the best way to move the "thot" div next to the "circle" div?
("Cirle") [POST aka "thot div"]
Link http://ramovamusic.com/?page_id=165
Example: ramovamusic.com/example.jpg

Answer 1

So now that I understand your question. The problem is you have a set width on your article tag (500px) this needs to be increased so you can float your class circle and class thot. that way they will be next to each other.
Here is a working demo as to what I am talking about New Demo Working
Notice I removed the width on the article, added float right and width to class thot and float left on the circle. And now they are on the same line. You need to fiddle with it a bit to align it to your linking.
html:
<article style="" class="post" id="post-171">
<div class="circle">
<div class="month">20</div>
<div class="year">Mar 2015</div>
</div>
<div class="thot">
<h4>test 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tellus urna, mollis in nibh nec, fermentum rhoncus lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus ante arcu, laoreet ut efficitur vel, ornare sed risus. Cras eget interdum erat, finibus facilisis justo. Nam lorem mi, laoreet at dui non, rutrum semper felis. <a class="read-more" href="http://ramovamusic.com/?p=171">Read More</a></p>
<hr />
</div>
</article>
css:
.circle {
height: 165px;
width: 165px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: red none repeat scroll 0% 0%;
color: #000;
line-height: 35px;
float:left;
}
.thot{
float:right;
width:60%;
}

Answer 2

Add float:left to your circle div and some right margin, and for the .date class, add:
.date {
transform: translateY(-50%);
width: 165px;
top: 50%;
position: relative;
}
for .thot class add:
.thot {
float:left;
width: 300px; /* or whatever width works for you */
}
and finally you need to clear floats:
.post:after {
content: '';
display: table;
clear:both;
}

Answer 3

Here you go, better to apply the circle in a span to keep all the text together! Otherwise it can end up getting tricky like you saw!
https://jsfiddle.net/75tn8yps/3/
div{
float:left;
}
span.circle{
border: 1px solid red;
border-radius: 100%;
width: 100px;
height: 100px;
display: inline-block;
margin-left: 10px;
line-height: 95px;
text-align:center;
}
p{
text-align:center;
margin-top:40px;
}

Answer 4

Demo In Fiddle
I did change few things in the CSS File
.circle {
height: 165px;
width: 165px;
display: table-cell;
text-align: center;
vertical-align: middle;
color:white;
border-radius: 50%;
background: black;
color:black;
position:absolute;
}
.month{
font-size:40px;
font-weight:bold;
color:white;
line-height:90px;
}
.year{
font-size:20px;
color:white;
line-height:60px;
}
.thot{
border:1px solid black;
float:right;
width: calc(100% - 180px);
height:200px;
position:relative;
}
The new CSS. Check The fiddle.