using float properly in nav section-CodePudding

Recently i built navigation on my page. I tried using div next to ul li elements and I came across a problem. I used float: left for div.logo, nav ul li and I don't know why my "a" elements are placed vertically especially I used display:block for those elements. If I would float:left for nav ul li it will works fine but I dont know why I need to use in nav ul li structure. Below my code

* {
  margin: 0;
  padding: 0;
}
div.logo {
  float: left;
  height: 40px;
  background-color: #d41212;
  width: 30%;
  padding-right: 10%;
}

nav ul {
  height: 40px;
  width: 60%;
  background-color: #03912d;
}
nav ul li {
  list-style-type: none;
  float: left;
  width: 25%;
}

nav ul li a {
  display: block;
  text-decoration: none;
  padding-right: 10px;
  text-align: center;
}

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <div ></div>
      <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
      </ul>
    </nav>
  </body>
</html>

CodePudding user response：

When you float an element, you are removing it from the normal flow of the page. So when you float the <div> but NOT the <ul>, the <ul> content will wrap around the <div> but the width of the <ul> that you set in the CSS is not able to be fully used because some of it is "underneath" the floated element. When you float the <ul>, then the links are able to fit horizontally.

If you want to use float for layout, you should float every layout component in order to get the widths to be set correctly. But this means you also need to set a clearfix class on all parent containers with floated elements, in this case the <nav> and <ul> tags. Otherwise the parent winds up having no width because the children are technically removed from the normal flow.

<nav >
...

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Like others have said in the comments, I would not use float at all for layouts anymore since that was never their intended use, and instead use Flexbox in this case. It is much easier to use and debug, and built specifically for layouts.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* this is optional but maybe what you're looking for when you're setting your widths and padding */
}
nav {
  display: flex;
}
div.logo {
  height: 40px;
  background-color: #d41212;
  width: 30%;
  padding-right: 10%;
}
nav ul {
  display: flex;
  height: 40px;
  width: 60%;
  background-color: #03912d;
}
nav ul li {
  list-style-type: none;
  width: 25%;
}
nav ul li a {
  display: block;
  text-decoration: none;
  padding-right: 10px;
  text-align: center;
}

CodePudding user response：

You just need to add float: right; on ul tag like: nav ul { float: right;}

* {
  margin: 0;
  padding: 0;
}
div.logo {
  float: left;
  height: 40px;
  background-color: #d41212;
  width: 30%;
  padding-right: 10%;
}
nav ul {
    width: 60%;
    height: 40px;
    background-color: #03912d;
    float: right;
}
nav ul li {
  list-style-type: none;
  float: left;
  width: 25%;
}

nav ul li a {
  display: block;
  text-decoration: none;
  padding-right: 10px;
  text-align: center;
}

<nav>
    <div >Logo Area</div>
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
    </ul>
</nav>