0

I'm implementing navigation bar of github and wanna align two parts at the left and right. Therefore, I used float property, but it didn't work for my code. What is wrong with me?

html {
  box-sizing: border-box
}

*,
*:before,
*:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

body {
  font: 16px;
  line-height: 1.5;
  background-color: black;
}

a {
  text-decoration: none;
  color: inherit;
}

.navigation {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  background-color: black;
}

.navigation__left {
  border: 2px solid red;
  float: left;
}

.navigation__right {
  border: 2px solid blue;
  float: right;
}

.navigation__left,
.navigation__right {
  cursor: pointer;
  color: white;
  padding: 1rem;
}

.navigation__left img {
  height: 4vh;
}

.navigation__left__dropdown {
  position: absolute;
  margin-top: 1rem;
  display: none;
  color: black;
  background-color: white;
  padding: 20px;
  border-radius: 3%;
}

.navigation__left:hover {
  color: gray;
}

.navigation__left:nth-child(even):hover .navigation__left__dropdown {
  display: block;
}

.navigation__right:last-child a {
  border: 1px solid white;
  padding: 0.5vw 1vw 0.5vw 1vw;
  border-radius: 3%;
}

input {
  height: 3vh;
  width: 15vw;
  background-color: gray;
  border: 0;
  border-radius: 3%;
  padding: 10px;
}

input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}
<header>
  <nav>
    <ul class="navigation">
      <li class="navigation__left">
        <a href="https://github.com">
          <img src="github.png" alt="logo">
        </a>
      </li>
      <li class="navigation__left">
        <a href="#">Why Github?</a>
        <ul class="navigation__left__dropdown">
          <li>Dropdown 1</li>
          <li>Dropdown 2</li>
        </ul>
      </li>
      <li class="navigation__left">
        <a href="#">Enterprise</a>
      </li>
      <li class="navigation__left">
        <a href="#">Explore</a>
        <ul class="navigation__left__dropdown">
          <li>Dropdown 1</li>
          <li>Dropdown 2</li>
        </ul>
      </li>
      <li class="navigation__left">
        <a href="#">Marketplace</a>
      </li>
      <li class="navigation__left">
        <a href="#">Pricing</a>
        <ul class="navigation__left__dropdown">
          <li>Dropdown 1</li>
          <li>Dropdown 2</li>
        </ul>
      </li>
      <li class="navigation__right">
        <input type="text" placeholder="Search GitHub">
      </li>
      <li class="navigation__right">
        <a href="#">Sign In</a>
      </li>
      <li class="navigation__right">
        <a href="#">Sign Up</a>
      </li>
    </ul>
  </nav>
</header>

JSFIDDDLE

showdev
  • 28,454
  • 37
  • 55
  • 73
Privacy of Animal
  • 441
  • 2
  • 10
  • 17
  • 1
    See [float does not work in a flex container](https://stackoverflow.com/questions/39194630/float-does-not-work-in-a-flex-container) and [Making a flex item float right](https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right/36182782). – showdev Jun 27 '19 at 07:12
  • See [Using auto margins for main axis alignment](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#Using_auto_margins_for_main_axis_alignment). – showdev Jun 27 '19 at 07:24
  • @showdev Then, do I have to wrap `navigation__right` with container to use auto margin? – Privacy of Animal Jun 27 '19 at 07:30

4 Answers4

3

Flexbox ignores floats.
Instead, use margin to separate the left navigation items from the right navigation items.

A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left.

Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works.

Using auto margins for main axis alignment

Consider using the adjacent sibling combinator to target the first navigation__right element that follows a navigation__left element, and setting margin-left:auto.

.navigation__left + .navigation__right {
  margin-left: auto;
}

Demonstration:

html {
  box-sizing: border-box
}

*,
*:before,
*:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

body {
  font: 16px;
  line-height: 1.5;
  background-color: black;
}

a {
  text-decoration: none;
  color: inherit;
}

.navigation {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  background-color: black;
}

.navigation__left {
  border: 2px solid red;
}

.navigation__left,
.navigation__right {
  cursor: pointer;
  color: white;
  padding: 1rem;
}

.navigation__right {
  border: 2px solid blue;
}

.navigation__left+.navigation__right {
  margin-left: auto;
}

.navigation__left img {
  height: 4vh;
}

.navigation__left__dropdown {
  position: absolute;
  margin-top: 1rem;
  display: none;
  color: black;
  background-color: white;
  padding: 20px;
  border-radius: 3%;
}

.navigation__left:hover {
  color: gray;
}

.navigation__left:nth-child(even):hover .navigation__left__dropdown {
  display: block;
}

.navigation__right:last-child a {
  border: 1px solid white;
  padding: 0.5vw 1vw 0.5vw 1vw;
  border-radius: 3%;
}

input {
  height: 3vh;
  width: 15vw;
  background-color: gray;
  border: 0;
  border-radius: 3%;
  padding: 10px;
}

input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}
<header>
  <nav>
    <ul class="navigation">
      <li class="navigation__left">
        <a href="https://github.com">
          <img src="github.png" alt="logo">
        </a>
      </li>
      <li class="navigation__left">
        <a href="#">Why Github?</a>
        <ul class="navigation__left__dropdown">
          <li>Dropdown 1</li>
          <li>Dropdown 2</li>
        </ul>
      </li>
      <li class="navigation__left">
        <a href="#">Enterprise</a>
      </li>
      <li class="navigation__left">
        <a href="#">Explore</a>
        <ul class="navigation__left__dropdown">
          <li>Dropdown 1</li>
          <li>Dropdown 2</li>
        </ul>
      </li>
      <li class="navigation__left">
        <a href="#">Marketplace</a>
      </li>
      <li class="navigation__left">
        <a href="#">Pricing</a>
        <ul class="navigation__left__dropdown">
          <li>Dropdown 1</li>
          <li>Dropdown 2</li>
        </ul>
      </li>
      <li class="navigation__right">
        <input type="text" placeholder="Search GitHub">
      </li>
      <li class="navigation__right">
        <a href="#">Sign In</a>
      </li>
      <li class="navigation__right">
        <a href="#">Sign Up</a>
      </li>
    </ul>
  </nav>
</header>

Incidentally, the Github navigation you referenced has a somewhat more complex structure and uses nested flexboxes.

Community
  • 1
  • 1
showdev
  • 28,454
  • 37
  • 55
  • 73
2

In this case dont use Flex.

html {
  box-sizing: border-box
}

*,
*:before,
*:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

body {
  font: 16px;
  line-height: 1.5;
  background-color: black;
}

a {
  text-decoration: none;
  color: inherit;
}

.navigation {
  width: 100%;
  background-color: black;
}

.navigation__left {
  border: 2px solid red;
  float: left;
}

.navigation__right {
  border: 2px solid blue;
  float: right;
}

.navigation__left,
.navigation__right {
  cursor: pointer;
  color: white;
  padding: 1rem;
}

.navigation__left img {
  height: 4vh;
}

.navigation__left__dropdown {
  position: absolute;
  margin-top: 1rem;
  display: none;
  color: black;
  background-color: white;
  padding: 20px;
  border-radius: 3%;
}

.navigation__left:hover {
  color: gray;
}

.navigation__left:nth-child(even):hover .navigation__left__dropdown {
  display: block;
}

.navigation__right:last-child a {
  border: 1px solid white;
  padding: 0.5vw 1vw 0.5vw 1vw;
  border-radius: 3%;
}

input {
  height: 3vh;
  width: 15vw;
  background-color: gray;
  border: 0;
  border-radius: 3%;
  padding: 10px;
}

input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}
<header>
  <nav>
    <ul class="navigation">
      <li class="navigation__left">
        <a href="https://github.com">
          <img src="github.png" alt="logo">
        </a>
      </li>
      <li class="navigation__left">
        <a href="#">Why Github?</a>
        <ul class="navigation__left__dropdown">
          <li>Dropdown 1</li>
          <li>Dropdown 2</li>
        </ul>
      </li>
      <li class="navigation__left">
        <a href="#">Enterprise</a>
      </li>
      <li class="navigation__left">
        <a href="#">Explore</a>
        <ul class="navigation__left__dropdown">
          <li>Dropdown 1</li>
          <li>Dropdown 2</li>
        </ul>
      </li>
      <li class="navigation__left">
        <a href="#">Marketplace</a>
      </li>
      <li class="navigation__left">
        <a href="#">Pricing</a>
        <ul class="navigation__left__dropdown">
          <li>Dropdown 1</li>
          <li>Dropdown 2</li>
        </ul>
      </li>
      <li class="navigation__right">
        <input type="text" placeholder="Search GitHub">
      </li>
      <li class="navigation__right">
        <a href="#">Sign In</a>
      </li>
      <li class="navigation__right">
        <a href="#">Sign Up</a>
      </li>
    </ul>
  </nav>
</header>
Sumit Patel
  • 4,530
  • 1
  • 10
  • 28
1

You can set display:flex to inline-block

html {
  box-sizing: border-box
}

*,
*:before,
*:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

body {
  font: 16px;
  line-height: 1.5;
  background-color: black;
}

a {
  text-decoration: none;
  color: inherit;
}

.navigation {
  display: inline-block;
  flex-direction: row;
  align-items: center;
  width: 100%;
  background-color: black;
}

.navigation__left {
  border: 2px solid red;
  float: left;
}

.navigation__right {
  border: 2px solid blue;
  float: right;
}

.navigation__left,
.navigation__right {
  cursor: pointer;
  color: white;
  padding: 1rem;
}

.navigation__left img {
  height: 4vh;
}

.navigation__left__dropdown {
  position: absolute;
  margin-top: 1rem;
  display: none;
  color: black;
  background-color: white;
  padding: 20px;
  border-radius: 3%;
}

.navigation__left:hover {
  color: gray;
}

.navigation__left:nth-child(even):hover .navigation__left__dropdown {
  display: block;
}

.navigation__right:last-child a {
  border: 1px solid white;
  padding: 0.5vw 1vw 0.5vw 1vw;
  border-radius: 3%;
}

input {
  height: 3vh;
  width: 15vw;
  background-color: gray;
  border: 0;
  border-radius: 3%;
  padding: 10px;
}

input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}
<header>
  <nav>
    <ul class="navigation">
      <li class="navigation__left">
        <a href="https://github.com">
          <img src="github.png" alt="logo">
        </a>
      </li>
      <li class="navigation__left">
        <a href="#">Why Github?</a>
        <ul class="navigation__left__dropdown">
          <li>Dropdown 1</li>
          <li>Dropdown 2</li>
        </ul>
      </li>
      <li class="navigation__left">
        <a href="#">Enterprise</a>
      </li>
      <li class="navigation__left">
        <a href="#">Explore</a>
        <ul class="navigation__left__dropdown">
          <li>Dropdown 1</li>
          <li>Dropdown 2</li>
        </ul>
      </li>
      <li class="navigation__left">
        <a href="#">Marketplace</a>
      </li>
      <li class="navigation__left">
        <a href="#">Pricing</a>
        <ul class="navigation__left__dropdown">
          <li>Dropdown 1</li>
          <li>Dropdown 2</li>
        </ul>
      </li>
      <li class="navigation__right">
        <input type="text" placeholder="Search GitHub">
      </li>
      <li class="navigation__right">
        <a href="#">Sign In</a>
      </li>
      <li class="navigation__right">
        <a href="#">Sign Up</a>
      </li>
    </ul>
  </nav>
</header>
Sai Manoj
  • 3,809
  • 1
  • 14
  • 35
0

Remove the display:flex property

.navigation {
    flex-direction: row;
    align-items: center;
    width: 100%;
    background-color: black;
}
Shruti Agrawal
  • 366
  • 1
  • 9