htmlcsscss-floatfooter

Footer logo/text css/html

I have 3 separate lines of text in footer, that are supposed to stay on the left side, and a logo that is supposed to stay on the right side. No matter what I try in CSS, text and logo do not align. It's either making 3 lines of text fit on just one line, or the logo starts below the text, instead of being in line with it, just on the opposite(right side).

This is my html code:

 <footer>
        <hr>
        <p>line1</p>
        <p>line2</p>
        <p>line3</p>
        
        <img class="logo-footer" src="xxx">
        
        <hr>
        
        </footer>

There has to be a horizontal line at the beginning of the footer and on the bottom of it.This is the picture of what I need to achieve

Solution

  • Is this what you expect enter image description here

    You can learn flex-box by this website https://flexboxfroggy.com/

    .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

img {
  width: 60px;
  height: 60px;
}
    <footer>
  <hr>
 
  <div class="container">
    <div>
      <p>line1</p>
      <p>line2</p>
      <p>line3</p>
    </div>

    <img class="logo-footer" src="https://avatar.iran.liara.run/public/2">
  </div>
  
  <hr>
</footer>