Best HTML CSS practice for making a menu (with my float example)-CodePudding

I'm trying to understand how to make a menu that follows all the best practices of current HTML and CSS. I made this but was told that float is generally bad to use today but I'm not sure why, and if that is true then what is the best practice for controlling/positioning the menu?)

#header {
  width: auto;
  height: auto;
  border-bottom: 1px solid #d2d2d2;
}

#main_logo {
  width: 200px;
  float: left;
  padding: 8px 0px 0px 20px;
}

nav {
  float: right;
}

.ul-menu {
  display: flex;
}

.ul-menu li {
  display: inline;
  padding: 42px 20px 41.7px 20px;
  background-color: var(--brand-color-second);
  transition: background-color 0.24s linear;
  /* fade-in effekt på menu hover */
  border-left: 1px solid #d2d2d2;
}

.ul-menu li a {
  text-decoration: none;
  font-size: 0.86rem;
  color: #757575;
  letter-spacing: 2.5px;
  font-family: var(--secondary-font);
}

.ul-menu li:hover {
  /* background-color: #48763b; */
  /* PROBLEM MED HOVER: hvordan får man hele li til at være et link når man hover, i stedet for kun href? */
  background-color: var(--brand-color-main);
  color: #fff;
  border-bottom: 1px solid var(--brand-color-main);
}

.ul-menu li:hover a {
  color: #fff;
}

<header>
  <div id="header">
    <div id="main_logo">
      <a href="index.html"><img src="img/logo.png" alt="logo"></a>
    </div>
    <nav >
      <button >Menu</button>
      <ul >
        <li><a href="index.html">Forside</a></li>
        <li><a href="om-os.html">Om Vores Styrke</a></li>
        <li><a href="vi-tilbyder.html">Vi tilbyder</a></li>
        <li><a href="priser.html">Priser</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
      </ul>
    </nav>
  </div>
  <!-- header -->
  <div style="clear:both"></div>
</header>

CodePudding user response：

The reason floats are generally not recommended for modern browsers is due to the fact that they tend to break a lot of layouts, and struggle with responsiveness. They were commonly used to position text around images (and still sometimes are). They were never intended to be used with layouts.

Even just resizing my browser while testing your menu causes a button to move to random spots, and random words from your menu go missing.

Flexbox is a solid, functional alternative. Here's a quick read on how to use it for a navigation bar: https://ostraining.com/blog/webdesign/create-navmenu-with-flexbox/

CodePudding user response：

I had this issue when I first started learning CSS, it’s a common one. It’s possible to do this with floats, but it’s an absolute headache. The modern approach would be to use flexbox. It might take you a minute to learn, but it’s worth it - I promise you won’t look back.

Here’s a great written resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

This game will help you practice and test your flexbox skills: https://flexboxfroggy.com/

This video by Kevin Powell is great: https://youtu.be/u044iM9xsWU

Hope this helps :)