Having issues positioning divs - html

Question

This is basically what I want. Record ID on the left, then the actual post on the right. Instead I get this.
body{
background-color: #333333;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
}
h2{
display:inline;
}
h2 a{
color:#ffffff;
}
hr{
border: 1px solid #db8039;
}
.post {
margin-left:auto;
margin-right:auto;
width: 66%;
background-color: #1a1a1a;
border-radius:10px;
font-size: 15px;
padding: 10px 10px 5px 10px;
}
.button{
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#222));
background: -moz-linear-gradient(top, #333, #222);
color:#888;
height:40px;
}
div.test{
border: 1px solid white;
}
<div id="post'.$row['postId'].'" class="post">
<div id="left" style="float:left">
<h2>0</h2>
</div>
<div id="right">
<div style="float:left;">
<h2><a href=#>TITLE</a></h2>
</div>
<div style="float:right;">
Posted By: USER on DATE
</div>
<br style="clear:both;"/>
<hr />
<p>BODY</p>
</div>
</div>
I'm sure this is extremely simple to do, I am just at a loss, my CSS skills are... sub par I suppose.
Any help would be greatly appreciated! Thanks!

Answer 1

I made a complete new 1 if you wish to check it out
Demo
Edit: New Demo
HTML
<div class="container">
<div class="count">1</div>
<div class="upper">Test 2</div>
<hr>
<div class="down">Body</div>
</div>
CSS
.container {
width: 500px;
height: 100px;
background: #000;
position: relative;
}
.count {
float: left;
color: #fff;
font-size: 30px;
line-height: 100px;
width: 50px;
text-align: center;
}
.upper {
color: #fff;
font-size: 22px;
line-height: 40px;
}
.down {
color: #fff;
font-size: 22px;
line-height: 40px;
}
Though I don't recommend to use this, it will be pretty easier to achieve this using tables too
Table Demo
HTML
<table border="1">
<tr>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
CSS
table {
width: 50%;
margin: 30px;
}
table tr:nth-child(1) td:nth-child(1) {
width: 100px;
}

Answer 2

Try adding the following rules:
#left{
width:5%;
display:inline-block
}
#left h2{
font-size:40px;
}
#right{
width:94%;
display:inline-block
}
jsfiddle: http://jsfiddle.net/dPX8J/15/