Any idea how I could get two tables side by side, and third table at the bottom

Question

I am trying to make a email signature with html. But what I am trying to do is, having 2 tables side by side. And the third one at the bottom. I managed to do this by using align="left" on the first table. However, I have 3 tables. The first two are supposed to be side by side. But the third one has to be at the bottom. It works in browser. But in Outlook, the bottom table goes to the right, following the second table. The first has text and the second has an image.

I made on paint my beautiful designs for what I am trying to get:

What I want:
Picture of what I want

What I get:
Picture of what I get

I tried the following:
1. Using display:inline-block, does not work
2. Using align="left"for first and second, and even all of them. Nope
3. Using float, works in browser. But not in Outlook.
4. Placing the image in a cell, does not look nice.

The Code




emailsignature




    
        
            
        
        
            
                John Doe
        
        
            
                Operationeel Manager

        
        
            
                
            
        
        
            
                
                    Straatstraat 18

                    3333 AA Rotterdam

                    Telefoon: +31 (0) 10 111 11 11

                    Mobiel: +31 (0) 6 111 111 111 

                

        
        

            
                 
            
            
                
                    
                
            
            
                 
            

        
    
        
             
                
            
                

                    disclaimer
                
            
            

                |
            
            
                

                    privacy
                
            
            

                |
            
            
                

                    algemene voorwaarden
                
            
            

                |
            
            
                

                    kvk uittreksel
                
            
            

                |
            
            
                

                    wka verklaring

user2958788 · Accepted Answer

You need a wrapping table to set a defined width for the tables to take up. Otherwise your content is going to span the entire width of the email window.
Don't bother with heights on tables. Your content will define the height on your tables. Same goes with the heights on the table cells. Your content will do this for you, unless you're using it for spacer cells etc.
You have a mismatch of table cells between your table rows. You either need to have two cells in all rows to match the horizontal line, or add colspan="2" to all rows with only one cell.
Your widths on all of your cells will not work. When there is only one cell in a row, that cell will fill the width set by the table. There is no way around this, this is the natural behaviour of table cells. Remove widths off of rows with only one cell. Also remove the width off of one of the cells in the row with two cells. The second cell will fill the remaining width, left by the cell with a defined width.
With the current 650px width set on your table, your two inner tables will not sit side by side because of a silly quirk in Outlook which forces a 20px gap between tables. Your options to get around this are 1) Increase the width of your main table to 670px. 2) Reduce the width of one or both of your inner tables by 20px total. 3) Use ghost tables to mimic a table cell structure. 4) Wrap your inner tables in table cells, as @SJ_OWOW suggested.

Here is my version of your code. I went with the table cell option from point 5 as you haven't added any mobile responsive support in your signature, so for ease I went with that. There are still a few things I'd fix but this should at least fix your major issues:




emailsignature




    

    
        
    
            
                
                    
                        
                            
                                
                            
                            
                                
                                    John Doe
                            
                            
                                
                                    Operationeel Manager

                            
                            
                                
                                    
                                
                            
                            
                                
                                    
                                        Straatstraat 18

                                        3333 AA Rotterdam

                                        Telefoon: +31 (0) 10 111 11 11

                                        Mobiel: +31 (0) 6 111 111 111 

                                    

                            
                        
                    
                    
                        
                            
                                 
                            
                            
                                
                                    
                                
                            
                            
                                 
                            

                        
                    
                
                
                    
                        
                            
                                 
                                    
                                
                                    

                                        disclaimer
                                    
                                
                                

                                    |
                                
                                
                                    

                                        privacy
                                    
                                
                                

                                    |
                                
                                
                                    

                                        algemene voorwaarden
                                    
                                
                                

                                    |
                                
                                
                                    

                                        kvk uittreksel
                                    
                                
                                

                                    |
                                
                                
                                    

                                        wka verklaring

Any idea how I could get two tables side by side, and third table at the bottom

The Code

Answers (2)

Related Questions