widgets um do lado do outro

Detalhes da questão

Endereço do fórum: http://familiawarning.forumeiros.com
Versão do fórum: PunBB

Descrição

Gostaria de saber como colocar widgets dessa forma, um do lado do outro. E se possível, fazer alguns widgets parecidos com estes "novidades" "acesso rápido" "ambientação"
http://prntscr.com/huxfl6
fórum em que vi: http://naruto-survival.forumeiros.com/

Olá autor, boa noite e feliz ano novo.

Pois bem, vamos para a sua questão, isso não se trata de "widgets", na verdade apenas o assuntos recentes é o widget na questão, que na verdade a informação é puxada pra tabela, enfim, agora que foi explicado vamos para a reprodução desse feito.

Você acessa:

Painel de Controle -> Visualização -> Pagina Inicial -> Geral

E tem a aba "Mensagem na Pagina Inicial", você coloca o código que deixarei abaixo no corpo de mensagem onde diz: "Conteúdo da mensagem".

Código:

<table>
   
   <tbody>
      
      <tr>
         
         <td>
            
            <div id="tab-nom">
                mensagens recentes               
            </div>
            
            <div id="tab-cont">
               
               <div id="micontenedor">
                  
               </div>
               
            </div>
            
         </td>
         
         <td>
            
            <div id="tab-nom">
                ambientação             
            </div>
            
            <div id="tab-amb">
                <br /> <br /> 
               <center>
                   <img src="http://i.imgur.com/hQjAvwL.png" />
               </center>
                              
            </div>
            
         </td>
         
         <td>
            
            <div id="tab-nom">
                novidades             
            </div>
            
            <div id="tab-nov">
               
               <div id="nov-fecha">
                   00/00           
               </div>
                Novidade número um,<br />           
               <div id="nov-fecha">
                   00/00           
               </div>
                Novidade número dois,<br />           
               <div id="nov-fecha">
                   00/00           
               </div>
                Novidade número três,<br />           
               <div id="nov-fecha">
                   00/00           
               </div>
                Novidade número quatro,<br />           
               <div id="nov-fecha">
                   00/00           
               </div>
                Novidade número cinco,      <br />           
               <div id="nov-fecha">
                   00/00           
               </div>
                Novidade número seis,      <br />
               <div id="nov-fecha">
                   00/00           
               </div>
                Novidade número sete,,<br />           
               <div id="nov-fecha">
                   00/00           
               </div>
                Novidade número oito,<br />           
               <div id="nov-fecha">
                   00/00           
               </div>
                Novidade número nove,      <br />
               <div id="nov-fecha">
                   00/00           
               </div>
                Novidade número dez,<br />           
               <div id="nov-fecha">
                   00/00           
               </div>
                Novidade número onze,<br />           
               <div id="nov-fecha">
                   00/00           
               </div>
                Novidade numero doze,      <br /> 
            </div>
            
         </td>
         
         <td>
            
            <div id="tab-nom">
                acesso rápido               
            </div>
            
            <div id="tab-staff">
                <a href="http://naruto-survival.forumeiros.com/f1-regras">Regras</a><a href="http://naruto-survival.forumeiros.com/f8-jornal-survival">Jornal</a><a href="http://naruto-survival.forumeiros.com/h3-mapa">Mapa Mundi</a><a href="http://naruto-survival.forumeiros.com/t2200-pedido-de-narrador-avaliador">Pedido de Narrador</a>      <a href="http://naruto-survival.forumeiros.com/t3036p780-banco-de-atualizacoes-gerais">banco de Atualizações</a>    <a href="http://naruto-survival.forumeiros.com/f70-criacoes">Criações</a>         
            </div>
            
         </td>
         
      </tr>
      
   </tbody>
</table><script>jQuery("#micontenedor").replaceWith(jQuery("#comments_scroll_div"));</script><style>
#tab-nom {
    width: 217px;
    margin: 3px;
    padding: 10px;
    background-image: url(https://i.imgbox.com/BO02rLF0.png);
    border-bottom: px solid #7A2C18;
    border: 1px solid white;
    outline: 1px solid black;
    color: #f6f6f6;
    font-family: arial;
    font-size: 10px;
    font-variant: normal;
    font-weight: normal;
    text-shadow: 1px 1px 1px #000;
    text-transform: uppercase;
    line-height: 15px;
    text-align: center;
}
#tab-cont {
    width: 220px;
    height: 220px;
    padding: 10px;
    border: 1px solid #E8E8E8;
    overflow: auto;
    line-height: 11px;
}
#nov-fecha {
    padding: 2px 6px;
    margin: 0px 4px;
    background: #6A7067;
    border-radius: 6px;
    -moz-border-radius: 6px;
    color: white;
    display: inline-block;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2px;
}
#tab-amb, #tab-nov, #tab-staff {
    width: 220px;
    padding: 10px;
    background: ;
    border: 1px solid #E8E8E8;
    color: ;
    margin: 1px;
    height: 220px;
    overflow: auto;
    font-size: 11px;
    line-height: 12px;
    text-align: justify;
}
#tab-staff a {
    background: url(https://i.imgbox.com/BO02rLF0.png);
    font-family: roboto;
    color: white;
    display: inline-block;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0px;
    margin-bottom: 2px;
    text-align: center;
    width: 220px;
    line-height: 32.8px;
    transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
}
</style>

OBS: Pra funcionar o efeito do Ultimos assuntos é necessário ativar o widget "tópicos recentes" no fórum.

Até.

resultou, obrigado!