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

Html – Div is not floating right, problem seems to be linked to the CSS already in the code

I am currently attempting to make a simple header with HTML and CSS. I have encountered a problem where my button list is not floating to the right, giving the site an odd appearance.

I tried floating the list to the right, floating the ul to the right and as you can see here floating the div to the right.

When I only added the list into a seperate site it actually did float to the right but once I pasted in my CSS it stopped. I couldn’t find what was causing it.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

header {
  display: inline-flex;
  background-color: grey;
  width: 110%;
  margin-left: -10px;
  margin-right: -10px;
  margin-top: -10px;
  height: 100px;
  align-items: center;
}

.logo {
  height: 100px;
  margin-top: -4px;
  font-family: "Montserrat", sans-serif;
}

ul li {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  width: max-content;
  list-style-type: none;
  display: inline;
  padding: 10px;
}

.headerButton {
  transition: 0.1s ease-in;
  color: black;
  text-decoration: none;
  font-weight: 500;
  width: 10px;
}
<header>
  <a href="https://codepen.io/ThatCanadianKid_/full/qBwgVpJ">
    <img src="https://www.kadencewp.com/wp-content/uploads/2020/10/alogo-4.png" class="logo">
  </a>
  <div style="float:right;">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</header>

If you need any info please do ask, I may have forgotten something.
I am very new to web development so please don’t tear me to shreds if my code is bad.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Figured out that the issue was that I was using inline-flex which doesn't work with float.


  2. 0

    The problem is due to the container being an inline-flex element, which makes the "floated" div a flex-item for which float is irrelevant.

    But you can add margin-left: auto; to the div to move it to the right, the usual way to achieve that inside a flex container:

    @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

header {
  display: inline-flex;
  background-color: grey;
  width: 110%;
  margin-left: -10px;
  margin-right: -10px;
  margin-top: -10px;
  height: 100px;
  align-items: center;
}

.logo {
  height: 100px;
  margin-top: -4px;
  font-family: "Montserrat", sans-serif;
}

ul li {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  width: max-content;
  list-style-type: none;
  display: inline;
  padding: 10px;
}

.headerButton {
  transition: 0.1s ease-in;
  color: black;
  text-decoration: none;
  font-weight: 500;
  width: 10px;
}
    <header>
  <a href="https://codepen.io/ThatCanadianKid_/full/qBwgVpJ">
    <img src="https://www.kadencewp.com/wp-content/uploads/2020/10/alogo-4.png" class="logo">
  </a>
  <div style="margin-left: auto;">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search