css aligning menu to the right

Question

This is probably a simple one, but I can't seem to figure it out for the life of me. I'm making a mobile menu and I'm trying to make it sit to the right of the screen. (the search bar and the menu icon)

My problem is that if I float it to the right, the background disappears and if I text-align it the text-indent I have on a link decides to show up.

My html

<div id="subHeader">
 <ul class="mobileMenu">
   <li>
      <form>
          <input type="text" name="search" id="search" />
            <input type="submit" value="Search"  class="sub" />
      </form>
  </li>
  <li class="menLink"><a href="#">MobileMenu</a></li>
 </ul>      
</div>

and an example can be seen over here at jsfiddle

http://jsfiddle.net/zazvorniki/9SWbs/1/

Some help would be much appreciated!

Answer 1

I achieved the layout you are after by adding width :100% and float: right to #subHeader. I also added float: right to .mobileMenu li and removed the margin attributes of .menlink. Please see below changes and jsfiddle...

#subHeader{
    background: #c1c1ab;
    width: 100%;
    color: #1a1a15;
    float: right;
}

.mobileMenu li{
    display: inline-block;
    float: right; 
    font: bold 1.2em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    margin-right: 4px;
}

.menLink {
    background:url("http://tinyurl.com/kgd7ayt") no-repeat;
    height: 3em;
    width: 3em;
}

.menLink a {
    text-indent:-9999px;
    display:block;
    height: 3em;
    width: 3em;
}

jsfiddle demo