Question

I am setting up a navigation menu to a site but I am having difficulties achieving the goal. The navigation bar
has an input field that goes on the top left. The position of the input field is not being set correctly with my css rules I have applied. I am not sure if it is the position or the html structure. Is there away I can line up the input field above the navigation menu like in the picture below? EXAMPLE

Thanks

HTML set up

<div id="header">
  <div id="searchInput"></div>
       <h2>MAINT TITLE PAGE</h2>
  <div id="navigation">

  <ul class="button-list">
    <li><a href="#" class="buttonNav" >Content 1</a></li>
    <li><a href="#" class="buttonNav" >Content 2</a></li>
    <li><a href="#" class="buttonNav" >Content 3</a></li>
    <li><a href="#" class="buttonNav" >Content 4</a></li>
    <li><a href="#" class="buttonNav" >Content 5</a></li>   
   </ul> 

   <li class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></li>
  </div>


 </div>

CSS

<style>

#navigation {
    left: 440px;
    margin-top: 80px;
    position: relative;
}

#au_title {
    color: #FC821D;
    font-size: 120%;
    font-weight: bold;
    left: 515px;
    letter-spacing: 2px;
    position: relative;
    text-transform: uppercase;
    top: -105px;
}

#searchInput {
    left: 700px;
    position: relative;
    top: -180px;
}

#contentNav { color: #cfdae3; }


/* Dark Button CSS */
.buttonNav {
    outline: 0;
    padding: 5px 12px;
    display: block;
    color: #EBEBEB;
    font-weight: bold;
    text-shadow: 1px 1px #1f272b;
    border: 1px solid #1c252b;
    border-radius: 3px;

}
.buttonNav:hover {
    color: #fff;
    background: #4C5A64;

}
.buttonNav:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    color: #fff;
    padding: 6px 12px 4px;
    background: #20282D;

}


.button-list {
    list-style: none outside none;
    overflow: hidden;
}

.button-list li { float: left; margin: 0 5px 0 0; }
.button-list li.search { padding-left: 18px; margin-left: 10px; position: relative; list-style: none outside none;}

/* Search CSS: *


    .search-input {
        padding: 0 5px 0 22px;
        border: 2px solid #DADADA;
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        border-radius: 25px;
        background: #FFF; 

    }

    .search-input li {
    list-style: none outside none;
    }


    .search-submit {
        width: 13px;
        height: 13px;
        border: none;
        background: url(images/mag-glass.png) no-repeat;
        display: block;
        position: absolute;
        left: 26px;
        top: 10px;
        text-indent: -9999em;
    }
    </style>

Current Result:

Desire Result:*

Answer 1

Your “search” element is wrapped in an <li> incorrectly, change it to a <div> and add it above your navigation and your <h2> inside your navigation <div> like so:

    <div id="header">
      <div class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></div>
      <div id="navigation">
       <h2>MAINT TITLE PAGE</h2>
       <ul class="button-list">
        <li><a href="#" class="buttonNav" >Content 1</a></li>
        <li><a href="#" class="buttonNav" >Content 2</a></li>
        <li><a href="#" class="buttonNav" >Content 3</a></li>
        <li><a href="#" class="buttonNav" >Content 4</a></li>
        <li><a href="#" class="buttonNav" >Content 5</a></li>   
       </ul> 
      </div>
     </div>

then add this CSS

.search{
   float:right;
   margin-right:10px;
}

Hope that makes sense?