[SOLVED] Tables Side by Side

[Forumedic]

Code:

<div align="center">
    
   <table style="padding: 0px 0px;background: #32C775;width: 150px;height: 30px;border-radius: 3px;">
       
      <tbody>
          
         <tr>
             
            <td>
                
               <div align="center">
                    <strong><a href="http://www.forumpromocean.com/t299-reviewers-wanted?tid=4d417a683f2bd1f275248ff63f1b1aeb" class="postlink"><span style="color: rgb(250, 250, 250);">Hiring Forum Reviewers</span></a></strong> 
               </div>
                
            </td>
             
         </tr>
          
      </tbody>
       
   </table>
</div><br />
<div align="center">
    
   <table style="padding: 0px 0px;background: #3295C7;width: 150px;height: 30px;border-radius: 3px;">
       
      <tbody>
          
         <tr>
             
            <td>
                
               <div align="center">
                    <strong><a href="http://www.forumpromocean.com/t258-packagers-wanted?tid=4d417a683f2bd1f275248ff63f1b1aeb" class="postlink"><span style="color: rgb(250, 250, 250);">Hiring Forum Packagers</span></a></strong> 
               </div>
                
            </td>
             
         </tr>
          
      </tbody>
       
   </table>
</div><br />
<div align="center">
   <table style="padding: 0px 0px;background: #333333;width: 150px;height: 30px;border-radius: 3px;">
      <tbody>
         <tr>
            <td>
               <div align="center">
                  <strong><a href="http://www.forumpromocean.com/t412-affiliation-program?tid=4d417a683f2bd1f275248ff63f1b1aeb" class="postlink"><span style="color: rgb(250, 250, 250);">Affiliation Program</span></a></strong>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
</div>

That's my forum descriptions on: http://forumpromocean.com

I was wondering if I could have help making them side by side but spaces in between them so they are not touching.

[Ange TuteurAdministrator]

It appears to be corrected on your side, but just in case you didn't know, here's some information your should memorize :

In HTML there are two important types of containers ( or tags ) :

1. Inline
- Inline tags display side-by-side, sharing the same line with other inline elements.

2. Block
- Block-level tags are greedy, they take up the whole line and push other elements into their own line as well.

The problem with your markup is you're wrapping your tables individually with a <div> tag. DIVs are block-level elements which is why your tables are not displaying side-by-side. Furthermore at the closing of each of these DIVs you have a break tag ( <br> ) which also pushes elements onto their own individual line. Removing the break tags and wrapping all tables with ONE <div> solves this issue.

See these sources for further information :
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
http://www.w3schools.com/html/html_blocks.asp

[Forumedic]

Thank you!

[Sponsored content]