Hi,

I have a widget positioned right beneath my logo. I used Display:absolute and positioned it that way.

The widget is this following:

Code:


<style>
#index_2ndrow_table {
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    height: 148px;
    background-color: #202020;
    color: #FFF;
    top: 378px;
}

#index_tour_table_container {
    background-color: #484848;
    left: 0px;
    width: 685px;
    height: 148px;
}

tr.index_tour_head {
text-align:center;
color: red;
padding: 10px;
}

.tour_title {
    background-color: #484848;
    text-align: center;
    padding: 7px 1px 9px;
    margin-bottom: 0px;
}

#index_tour {
    width: 684px;
}

.index_tour_split {
    background-color: #868686;
}

.index_tour_head_title {
    padding: 3px;
}

.index_tour_head_title2 {
    padding: 3px;
    width: 135px;
}

.index_tour_list_name {
    padding: 2px 0px 3px 5px;
}

.index_tour_list_name2 {
    padding: 2px 0px 3px 5px;
    text-align: center;
}

.index_tour_list {
    background-color: rgb(164, 164, 164);
}

</style>
<div id="index_2ndrow_table">
                                      
   <div id="index_tour_table_container">
                                         
      <p class="tour_title">
                           Tournament Table                 
      </p>
                                         
      <table id="index_tour">
                                              
         <tbody>
            <tr class="index_tour_split">
                                                  
               <th class="index_tour_head_title">
                                    Tournament                 
               </th>
                                                  
               <th class="index_tour_head_title2">
                                    Status                 
               </th>
                                                  
            </tr>
                                               
            <tr class="index_tour_list">
                                                  
               <td class="index_tour_list_name">
                                    Tournament #1 Here                 
               </td>
                                                  
               <td class="index_tour_list_name2">
                                    Status Here                 
               </td>
                                                  
            </tr>
                                       
            <tr class="index_tour_list">
                                                  
               <td class="index_tour_list_name">
                                    Tournament #1 Here                 
               </td>
                                                  
               <td class="index_tour_list_name2">
                                    Status Here                 
               </td>
                                                  
            </tr>
                                       
            <tr class="index_tour_list">
                                                  
               <td class="index_tour_list_name">
                                    Tournament #1 Here                 
               </td>
                                                  
               <td class="index_tour_list_name2">
                                    Status Here                 
               </td>
                                                  
            </tr>
                                       
            <tr class="index_tour_list">
                                                  
               <td class="index_tour_list_name">
                                    Tournament #1 Here                 
               </td>
                                                  
               <td class="index_tour_list_name2">
                                    Status Here                 
               </td>
                                                  
            </tr>
                                       
            <tr class="index_tour_list">
                                                  
               <td class="index_tour_list_name">
                                    Tournament #1 Here                 
               </td>
                                                  
               <td class="index_tour_list_name2">
                                    Status Here                 
               </td>
                                                  
            </tr>
                                               
         </tbody>
      </table>
                                           
   </div>
        
</div>
   

Whenever I try to add another code to it, it doesn't show properly. I'm adding the code before the last div in the previous code so they remain within the same div container.

The code is this:

Code:


<div id="moving_icons">
        
   <div id="moving_icon_field1">
        <img id="mo_ic" src="http://i.imgur.com/0bHQftt.png" />   
      <p class="mo_ic_p1">
             This is some text here   
      </p>
           
   </div>
        
</div>


It's pretty basic but not working properly. This is how it appears before I add the 2nd code: http://prntscr.com/8i5byd

Here is how it looks after: http://prntscr.com/8i5csl

I want them both to be centered in the middle of the page when zooming in or out of the page. That's why I'm using inline-block and not float.

How do i fix this?

Code:


    <style>
    #index_2ndrow_table {
        position: absolute;
        display: block;
        left: 0px;
        right: 0px;
        height: 148px;
        background-color: #202020;
        color: #FFF;
        top: 378px;
    }

    #index_tour_table_container {
        background-color: #484848;
        left: 0px;
        width: 685px;
        height: 148px;
    }

    tr.index_tour_head {
    text-align:center;
    color: red;
    padding: 10px;
    }

    .tour_title {
        background-color: #484848;
        text-align: center;
        padding: 7px 1px 9px;
        margin-bottom: 0px;
    }

    #index_tour {
        width: 684px;
    }

    .index_tour_split {
        background-color: #868686;
    }

    .index_tour_head_title {
        padding: 3px;
    }

    .index_tour_head_title2 {
        padding: 3px;
        width: 135px;
    }

    .index_tour_list_name {
        padding: 2px 0px 3px 5px;
    }

    .index_tour_list_name2 {
        padding: 2px 0px 3px 5px;
        text-align: center;
    }

    .index_tour_list {
        background-color: rgb(164, 164, 164);
    }

    </style>
    <div id="index_2ndrow_table">
                                          
       <div id="index_tour_table_container">
                                            
          <p class="tour_title">
                               Tournament Table                
          </p>
                                            
          <table id="index_tour">
                                                  
             <tbody>
                <tr class="index_tour_split">
                                                      
                   <th class="index_tour_head_title">
                                        Tournament                
                   </th>
                                                      
                   <th class="index_tour_head_title2">
                                        Status                
                   </th>
                                                      
                </tr>
                                                  
                <tr class="index_tour_list">
                                                      
                   <td class="index_tour_list_name">
                                        Tournament #1 Here                
                   </td>
                                                      
                   <td class="index_tour_list_name2">
                                        Status Here                
                   </td>
                                                      
                </tr>
                                          
                <tr class="index_tour_list">
                                                      
                   <td class="index_tour_list_name">
                                        Tournament #1 Here                
                   </td>
                                                      
                   <td class="index_tour_list_name2">
                                        Status Here                
                   </td>
                                                      
                </tr>
                                          
                <tr class="index_tour_list">
                                                      
                   <td class="index_tour_list_name">
                                        Tournament #1 Here                
                   </td>
                                                      
                   <td class="index_tour_list_name2">
                                        Status Here                
                   </td>
                                                      
                </tr>
                                          
                <tr class="index_tour_list">
                                                      
                   <td class="index_tour_list_name">
                                        Tournament #1 Here                
                   </td>
                                                      
                   <td class="index_tour_list_name2">
                                        Status Here                
                   </td>
                                                      
                </tr>
                                          
                <tr class="index_tour_list">
                                                      
                   <td class="index_tour_list_name">
                                        Tournament #1 Here                
                   </td>
                                                      
                   <td class="index_tour_list_name2">
                                        Status Here                
                   </td>
                                                      
                </tr>
                                                  
             </tbody>
          </table>
                                              
       </div>
            
    </div>
        
    <div id="moving_icons">
            
       <div id="moving_icon_field1">
            <img id="mo_ic" src="http://i.imgur.com/0bHQftt.png" />  
          <p class="mo_ic_p1">
                 This is some text here  
          </p>
              
       </div>
            
    </div>


This is where it's showing with your code

http://prntscr.com/8i6wnn

I want it to be next to the tournaments table, similar to what we get if we used float.

Create a table and add the codes so they will be next to each other.

Where do I place the table?

You said that this was in a widget.  Correct?  Then add the table to the widget.

I added the table to the widget, same result. Anything I add to that code shows beneath the tournaments table and not beside it.

Please post your code.

It's the same one in the OP

I made another widget, nothing seems to work when using the code inside the same widget.

Thanks for your help