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">&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;
}