Table and div positioning isn't lining up

Question

So, here is my problem; I am trying to position a div that is right next to a table. I want them to line up side by side. Like it is, they line up with the text above all of the rest of it. Check out my vision board below:

Except I actually want the words "Signature Editor" to be at the top (photo problem) rather than the bottom. So that is what I want. It all to be lined up side by side. However, here is what is actually is:

As you can see, the "Signature Editor" text is above the table rather than lined up like how I want it to be (see my vision board).

Here is my code:

table {
  display: inline-block;
}
#signatureEditorText {
  font-family: 'Source Sans Pro', sans-serif;
}
#image {
  width: 125px;
  height: 125px;
  border-radius: 50%;
  margin-top: -45px;
}
.spacer {
  width: 15px;
}
hr {
  height: 200px;
  width: 7.5px;
  border-radius: 20px;
  border: none;
  background-color: cornflowerBlue;
}
#fullName {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px;
  color: orange;
  margin-top: -40px;
  }
#job {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 15px;
  margin-top: -12px;
  }
#jobLocationText {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  margin-top: -3px;
}
.otherText {
  color: seaGreen;
}
#emailAddress {
    margin-top: 5px;
}
#extra1, #extra2, #extra3, #extra4, #extra5, #extra6 {
    white-space: pre-wrap;
}

Signature Editor

    
        
            
        
        
        
            
        
        
    
    
        Billy Staples
    
    
        Programmer
    
    
        at My Company
    


    
        Email: email@domain.com
    
    
        Phone: 111-222-3333
    
    
        Office Phone: 444-555-6666
    
    
        Address: 1379 Philadelphia Avenue
    
    
        Website: example.com

And a JSFiddle of it is here.

Also, here are some methods I have tried: display: inline;, display: inline-block;, display: block;.

Thanks!

Obsidian Age · Accepted Answer

So you want your text to be displayed to the left of your table, and at the top, so that it lines up with the avatar? That can be achieved by simply setting float: left on the #signatureEditorText:

table {
  display: inline-block;
}
#signatureEditorText {
  font-family: 'Source Sans Pro', sans-serif;
  float: left;
}
#image {
  width: 125px;
  height: 125px;
  border-radius: 50%;
  margin-top: -45px;
}
.spacer {
  width: 15px;
}
hr {
  height: 200px;
  width: 7.5px;
  border-radius: 20px;
  border: none;
  background-color: cornflowerBlue;
}
#fullName {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px;
  color: orange;
  margin-top: -40px;
  }
#job {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 15px;
  margin-top: -12px;
  }
#jobLocationText {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  margin-top: -3px;
}
.otherText {
  color: seaGreen;
}
#emailAddress {
    margin-top: 5px;
}
#extra1, #extra2, #extra3, #extra4, #extra5, #extra6 {
    white-space: pre-wrap;
}

Signature Editor

    
        
            
        
        
        
            
        
        
    
    
        Billy Staples
    
    
        Programmer
    
    
        at My Company
    


    
        Email: email@domain.com
    
    
        Phone: 111-222-3333
    
    
        Office Phone: 444-555-6666
    
    
        Address: 1379 Philadelphia Avenue
    
    
        Website: example.com

Hope this helps! :)

Table and div positioning isn't lining up

Answers (2)

Related Questions

Table and div positioning isn&#39;t lining up

Answers (2)

Related Questions

Table and div positioning isn't lining up