0

I am trying to place an image next to my signature line details. However, when I use the code below, the last two lines of the text are aligned under the signature. How can I modify the code?

img {
  width: 100px;
  border-radius: 50px;
  float: left;
  margin-right: 10px;
}

p.Name {
  font-weight: bold;
}
<img src="https://via.placeholder.com/150">
<p class="Name">John Smith</p>
<p>123 Main Street</p>
<p>Anytown, USA</p>
<p>123 4567</p>
<p>johnsmith@gmail.com</p>
isherwood
  • 58,414
  • 16
  • 114
  • 157
GPB
  • 2,395
  • 8
  • 26
  • 36
  • 1
    This is normal [float](https://developer.mozilla.org/en-US/docs/Web/CSS/float) behavior. Did you look into that? I suggest modern layout techniques instead. – isherwood Mar 03 '23 at 19:39
  • @isherwood. I'm just trying to format a signature line without learning all modern layout techniques. I'm an able but not expert programmer. – GPB Mar 03 '23 at 20:13
  • @isherwood also, how do I access a local image file? – GPB Mar 03 '23 at 20:14
  • Please don't ask new, unrelated questions in comments. Short answer: you don't. The browser doesn't have access to your file system. – isherwood Mar 03 '23 at 20:31

1 Answers1

1

Try this, Here we are using display: flex;

.twoColumns {
  display: flex;
  flex-direction: row;
}

.responsive {
  max-width: 100%;
  height: auto;
}

.right {
  max-width: 100%;
  margin-left: 28px;
}

p.Name {
  font-weight: bold;
}
<div class="twoColumns">
  <div class="left">
    <img src="https://via.placeholder.com/100">
  </div>
  
  <div class="right">
    <p class="Name">John Smith</p>
    <p>123 Main Street</p>
    <p>Anytown, USA</p>
    <p>123 4567</p>
    <p>johnsmith@gmail.com</p>
  </div>
</div>
vimuth
  • 5,064
  • 33
  • 79
  • 116
  • 1
    Good solution, but you should've implemented it with the original code. You've lost some of the styling. Also, there's a class in the CSS that isn't being used, and the image takes up too much space. – isherwood Mar 03 '23 at 19:45
  • 1
    It worked, dogmatic quibbles aside. Thank you and apologies for the delay in recognising your solution. – GPB Mar 14 '23 at 21:28