Div element is on new line without <br> but i don't want to do that

Question

Im making a web page and I have a header with a menu option on the left, a title in the middle and a link to the logIn/signUp page. This an img: https://ibb.co/z6R1h6w Unfortunately the login and signup link on the left hand side is on a new line and i don't want that to happen. I have tried the following:

  float: right;

  text-align: right;

  vertical-align: text-top !important;

Code: https://hastebin.com/pesuhemulo.xml

cheers in advance

Answer 1

You shouldn't use float layouts anymore, they are kind of outdated for most use-cases.

I recommend using Flexbox. Here's a small example:

header, header #menu {
  display: flex;
  flex-flow: row;
  justify-content: space-evenly;
  align-items: center;
}

#menu li {
  margin: 0 20px;
}

<header>
<p>Menu</p>
<p>Image</p>
<ul id="menu">
<li>link A</li>
<li>link B</li>
</ul>
</header>

You can add nowrap to flex-flow in order to make sure they are ALWAYS in the same row.

Hope it helps.