Having problems positioning divs

Question

This is basically what I want. Record ID on the left, then the actual message 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 am sure it is very simple to do, I'm just at a loss, my CSS skills ... sub par I suppose.

Any help would be greatly appreciated! Thanks!

Answer 1

I made a brand new 1 if you want 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; } 

Although I do not recommend using this, it will be quite easy to achieve using tables too

Demo table

HTML

 <table border="1"> <tr> <td rowspan="2">&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</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/