Subject Messages

Hello
I've created with my friend a code for the: Messages and subject!
Photo: https://i.imgur.com/U67GF.png
But it look awful!
How can i make them to look like this:
https://i.imgur.com/A1nb0.png

PS: This is the code:

Code:

.forabg .row  .topics {
    background: url("http://i41.servimg.com/u/f41/16/91/77/58/afw12.png") repeat scroll 0 0 #FAFCFC;
      border: 1px solid #b1b1b1;
    border-radius: 5px 5px 5px 5px;
    position: relative;
    top: 8px;
    left: 20px;
    height: 15px;
    font-family: Trebuchet MS,Tahoma;
    font-weight: bold;
    font-size: 10px;
    }

    .forabg .row  .posts {
    background: url("http://i41.servimg.com/u/f41/16/91/77/58/afw12.png") repeat scroll 0 0 #FAFCFC;
    border: 1px solid #b1b1b1;
    border-radius: 5px 5px 5px 5px;
    position: relative;
    top: 40px;
    left: -77px;
    height: 15px;
    font-family: Trebuchet MS,Tahoma;
    font-weight: bold;
    font-size: 10px;
    }

    ul.topiclist.forums dd.lastpost {
    background: url("http://i41.servimg.com/u/f41/16/91/77/58/afw12.png");
    border: 1px solid #B1B1B1;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 7px;
    position: relative;
    top: 8px;
    font-family: Trebuchet MS,Tahoma;
    font-weight: bold;
    font-size: 10px;
    }

    .table-title, .table-title h2 {
    display: inline;
    font-size: 1em;
    font-family: Trebuchet MS,Tahoma;
    font-size: 13px;
    font-weight: bolder;
    padding-left: 1px;
    }

    ul.topiclist dd.posts dfn {
    display:inline;
    margin-top: 40px;
    margin-left: 27px;
    }

    ul.topiclist dd.topics dfn {
    display:inline;
    margin-top: 30px;
    margin-left: 16px;
    }

.header dd.topics {display:none;}
.header  dd.posts{display:none;}
.header  dd.lastpost{margin-left: 155px;}


I'd edit it via templates. I'd add a
(Break Link) to make the other one go right down below it.

Hello,

I need the forum link :D Thanks!

EDIT!
I've solved the position ;)
but now i have another problem!
How can i make the categories to look like this:?
I mean: this : https://i.imgur.com/mjqle.png to be idem here: https://i.imgur.com/kg9nM.png
the forum is: gfactor.forum.st

You need to edit it in the templates. There are two table cells that seperate the two, if you move the message part into one of those tables, and the reply part in another they'll go side-by-side.

Example:

in PUNBB here's the default:

Code:

<tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                     <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                     </span>
                     <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                     <br />
                     {catrow.forumrow.FORUM_DESC}
                     <!-- BEGIN switch_moderators_links -->
                     <br />
                     {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                     <!-- END switch_moderators_links -->
                     {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                     <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                  </td>
                  <td class="tc2">{catrow.forumrow.TOPICS}</td>
                  <td class="tc3">{catrow.forumrow.POSTS}</td>
                  <td class="tcr">
                     <span>
                     <!-- BEGIN switch_topic_title -->
                     <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                     <!-- END switch_topic_title -->
                     {catrow.forumrow.USER_LAST_POST}
                     </span>
                  </td>
               </tr>

Code:

<td class="tc2">{catrow.forumrow.TOPICS}</td>

and

Code:

<td class="tc3">{catrow.forumrow.POSTS}</td>

are your defaults.

If you put a div tag around the variable, you'll be able to edit them without them stacking.