Changing the layout help

[Skiilz]

Hey guys, I'm willing to make some changes to the forums layout to make it looks like the picture bellow:


I'm unable to make it align the right way all I got is all the forums on the left/right/center side or like the screen bellow:


Here is the code I have for forumbit_depth2_forum:

HTML Code

1 2 3 4 5 6 7 8 9 10

<tr> <td class="{$bgcolor}" valign="center" align="left" style="white-space: norwap" width="10px"></td> <td class="{$bgcolor}" style="width: 330px;"> <strong><a href="{$forum_url}">{$forum['name']}</a></strong> <img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" style="margin-left: 3px; margin-top: 1px;" /> {$forum_viewers_text} <div class="smalltext">{$forum['description']}</div> We have a total of <strong>{$posts}</strong> posts and <strong>{$threads}</strong> threads in this forum. </td> </tr>

---

Here is the code I have for forumbit_depth1_cat:

HTML Code

1 2 3 4 5 6 7 8 9 10 11 12 13

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder"> <thead> <tr> <td class="thead" colspan="5"> <div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div> </td> </tr> </thead> <tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e"> {$sub_forums} </tbody> </table> <br />

---

Thank you for your help.