I am having some issues aligning multiple different elements. I have a search bar, a drop down box, my logo and 4 navigation buttons and I want my logo to be at the top left, followed by the drop down box and the 4 navigation buttons so it looks like 5 navigation buttons with 1 being a drop down box then followed by my search bar (which I will be making it so when you go to type in it, the rest of the ribbon at the top disappears so its one big search bar leaving only the logo, search bar and contact us button which the contact button will be at the top right. This is what it looks like so far.

@charset "utf-8";

/* CSS Document */

.dropbtn {
  background-color: #D11C1F;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #5E5A5A;
}

form {
  background-color: #4654e1;
  width: 300px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

input {
  all: unset;
  font: 16px system-ui;
  color: #fff;
  height: 100%;
  width: 100%;
  padding: 6px 10px;
}

::placeholder {
  color: #fff;
  opacity: 0.7;
}

button {
  all: unset;
  cursor: pointer;
  width: 44px;
  height: 44px;
}

svg {
  color: #fff;
  fill: currentColor;
  width: 24px;
  height: 24px;
  padding: 10px;
}

.searchbar {
  display: inline-block;
  float: right;
}

body {
  margin: 0;
  padding: 0;
  font-size: 15px;
}


/* Navigation */

nav {
  float: left;
  margin: 0;
  overflow: hidden;
  text-align: center;
}

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  list-style-type: none;
}

nav>ul>li>a {
  color: #aaa;
  display: block;
  line-height: 2em;
  padding: 0.5em 1em;
  text-decoration: none;
}

.logo-img {
  float: left;
  position: relative;
  margin: 10px 15px 15px 10px;
}

.bg-div {
  background: white;
  overflow: hidden;
}

<div class="dropdown">
  <button class="dropbtn">About Us</button>
  <div class="dropdown-content">
    <a href="">Awards</a>
    <a href="Employees.html">Employees</a>
    <a href="">FAQ</a>
    <a href="#">Overview</a>
  </div>
</div>
<div class="searchbar">
  <form id="form" role="search">
    <input type="search" id="query" name="q" placeholder="Search..." aria-label="Search through site content">
    <button>
                <svg viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
            </button>
  </form>
</div>

<div class="bg-div">
  <img class="logo-img" src="Assets/Logo Light.png" width="520" height="240" alt="align box" ALIGN="CENTER">
  <nav>
    <ul>
      <li><a href="#">Nav 1</a></li>
      <li><a href="#">Nav 2</a></li>
      <li><a href="#">Nav 3</a></li>
      <li><a href="#">Nav 4</a></li>
    </ul>
  </nav>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You are saying that you want to align multiple items on the top like a dropdown, a search bar etc. Why don't you add all these into the 'nav' tag instead of keeping only the 'ul' in it.

CodePudding user response：

Simply put your about dropdown inside the <nav>.this will make your content appear in one line. here is how its look like;

<nav>
      <ul>
        <div class="dropdown">
            <button class="dropbtn">About Us</button>
            <div class="dropdown-content">
              <a href="">Awards</a>
              <a href="Employees.html">Employees</a>
              <a href="">FAQ</a>
              <a href="#">Overview</a>
            </div>
          </div>
        <li><a href="#">Nav 1</a></li>
        <li><a href="#">Nav 2</a></li>
        <li><a href="#">Nav 3</a></li>
        <li><a href="#">Nav 4</a></li>
        
      </ul>
      
 </nav>