Html Question posted in
Some basic documentation can be found here.

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).

I will attach a drawing of what I am trying to achieve.

I tried to put float:left for text and float:right for the logo, but that didn’t help

Tags:

2

Answers


  1. 0

    Is this what you expected
    enter image description here

    You have to wrap 3 lines with an element to make it a block

    If you don’t want to make it have spaces between -> remove justify-content: space-between;

    .footer {
   display: flex;
   justify-content: space-between;
}
    <div class="footer">
  <div class="info">
    <p>line 1</p>
    <p>line 2</p>
    <p>line 3</p>
  </div>
  <div class="logo">Logo</div>
</div>
    Login or Signup to reply.
  2. 0

    Use a flexbox or a grid; they are much better suited to what you want to achieve. Floats are rarely useful on the modern web.

    body {
  margin: 1em;
}
footer {
  display: flex;
  gap: 1em;
  justify-content: space-between;
  background: #ddd;
  margin-top: 1em;
}

footer>div:first-child {
  padding-left: 1em;
}

footer img {
  display: block;
}
    The body of the page goes here

<footer>
  <div>
    <p>footer line 1</p>
    <p>footer line 2</p>
    <p>footer line 3</p>
  </div>
  <div>
    <img src="http://picsum.photos/150">
  </div>
</footer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search