CODEWITHSUNDEEP
htmlcss
Chi Shen
Chi Shen

Reputation: 207

How to move the search bar beside the nav bar

I've tried use float to make the nav bar arrange in horizontal and also the search bar will place beside the nav bar.

But the result is that the nav bar is not longer placed text align center.

body {
  background-color: #C0C0C0;
  margin: 0px;
}
#title {
  text-align: center;
  margin: 0;
  font-size: 40px;
  text-decoration: underline;
}
#wrapper {
  margin: 3% 5%;
  background-color: #FFF5EE;
  min-width: 300px;
  position: relative;
}
#navbar {
  text-align: center;
  font-size: 30px;
  padding: 20px;
  display: block;
  background-color: #4B0082;
}
.nav li {
  list-style-type: none;
  display: inline-block;
  padding: 30px;
  background-color: red;
}
.nav li a {
  color: white;
}
<DOCTYPE html>
  <html lang="en">

  <head>
    <link rel="stylesheet" type="text/css" href="test1.css">
    <title>KDU Music</title>
    <meta charset="utf-8">
  </head>

  <body>
    <div id="title">
      <p>
        <h1>Welcome to KDU MUSIC CENTER</h1>
      </p>
    </div>
    <div id="wrapper">
      <div id="navbar">
        <ul class="nav">
          <li><a href="index.html">Home</a>
          </li>
          <li><a href="findoutmore.php">Find out more</a>
          </li>
          <li><a href="offer.html">Offer</a>
          </li>
          <li><a href="credit.html">Credit</a>
          </li>
          <li><a href="#">Admin</a>
          </li>
          <li><a href="wireframe.html">WireFrame</a>
          </li>
        </ul>
        <form class="formright">
          <input type="text" placeholder="Search">
          <button type="submit">Search</button>
        </form>
      </div>
      <div id="content">
        <p>asdasdas</p>
      </div>
    </div>
  </body>

  </html>

How can i place the search bar just right beside the nav bar ?

enter image description here

Upvotes: 0

Views: 2446

Answers (2)

Naved Khan
Naved Khan

Reputation: 1947

http://codepen.io/Navedkhan012/pen/wzAGRo

body {
  background-color: #C0C0C0;
  margin: 0px;
}
#title {
  text-align: center;
  margin: 0;
  font-size: 40px;
  text-decoration: underline;
}
#wrapper {
  margin: 3% 5%;
  background-color: #FFF5EE;
  min-width: 300px;
  position: relative;
}
#navbar {
  text-align: center;
  font-size: 30px;
  padding: 20px;
  display: block;
  background-color: #4B0082;
}
.nav li {
  list-style-type: none;
  display: inline-block;
  padding: 10px;
  background-color: red;
}
.nav li a {
  color: white;
}
<div id="title">
      <p>
        <h1>Welcome to KDU MUSIC CENTER</h1>
      </p>
    </div>
    <div id="wrapper">
      <div id="navbar">
        <ul class="nav">
          <li><a href="index.html">Home</a>
          </li>
          <li><a href="findoutmore.php">Find out more</a>
          </li>
          <li><a href="offer.html">Offer</a>
          </li>
          <li><a href="credit.html">Credit</a>
          </li>
          <li><a href="#">Admin</a>
          </li>
          <li><a href="wireframe.html">WireFrame</a>
          </li>
          
          <li>
        <form class="formright">
          <input type="text" placeholder="Search">
          <button type="submit">Search</button>
        </form></li>
        </ul>
        
      </div>
      <div id="content">
        <p>asdasdas</p>
      </div>
    </div>
  </body>

Upvotes: 0

1GR3
1GR3

Reputation: 348

By adding apsolute position you will force the element to always be in the upper right corner:

.formright {
  position: absolute;
  right: 50px;
  top: 80px
}

And here you can see it in action: http://codepen.io/1GR3/pen/WGkwzo

For smaller screen sizes you will need to create media query which will rearrange it the other way.

Be aware this is a quick fix! To do it the proper way, use some kind of grid system and put elements into columns. On the left side you can use either empty column or offset.

Upvotes: 1

Related Questions