CSS3 search box responsive, Search button breaking up

Question

I want to design a responsive search box for my website and so when I found this codepen fiddle - http://codepen.io/nikhil/pen/GuAho, I fiddled around with it and ended up with this version - http://codepen.io/anon/pen/Qygrpe

<!-- language: lang-css -->

    /* CSS Search */

        .cf:before, .cf:after{
          content:"";
          display:table;
        }

        .cf:after{
          clear:both;
        }

        .cf{
          zoom:1;
        }

        /*-------------------------------------*/   

        .content-wrapper {
            width: 180px;
            padding: 0px;
            position:relative;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;

        }

    #search {
      position:relative;
      font-size:13px;font-family:"Dosis";
      float:right;
      margin-top:7px;
      right:5px;
    }
    #search-form {
      background-color:#314d5b;
      height:32px;
      line-height:32px;
      border:0 none;
      font-family:"Dosis";
      font-size:13px;
      font-weight:200;
      color:#b5c5ca;
      width:130px;
      -moz-border-radius: 4px 0 0 4px;
            -webkit-border-radius: 4px 0 0 4px;
            border-radius: 4px 0 0 4px;      
      box-shadow:inset 0 0 1px 0 rgba(0,0,0,0.2);
      padding:0 10px;
      transition:all 0.5s ease 0s;
    }
    #search-form .search-button,#search-form .search-button:hover{
      transition:all 0.5s ease 0s;
      height:21px;
      width:21px;
      line-height:30px;
      background-color:#ed0b77;
      border:0 none;
      float:right;
      cursor:pointer;
      outline:none;
    }
    #search-form:hover{
      background-color:#f0f0f0;
    }
    #search-form:focus{
      background-color:#eee;
      text-shadow:none !important;
      outline:none;
      color:#459bb6;
    }
    #box {display:none}
    .search-text {
      font-size:13px;
      font-family:"Dosis";
      float:right;
      cursor:pointer;
    }
    .search-text:hover {
      color:#459bb6
    }


        .content-wrapper button {
                overflow: visible;
            position: relative;
            float: right;
            border: 0;
            padding: 0;
            cursor: pointer;
            height: 32px;
            width: 30px;
            background: #416577;
            -moz-border-radius: 0 3px 3px 0;
            -webkit-border-radius: 0 3px 3px 0;
            border-radius: 0 3px 3px 0;      
            text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
        }   

        .content-wrapper button:hover{      
            background: #e2614c;
        }   

        .content-wrapper button:active,
        .content-wrapper button:focus{   
            background: #c42f2f;    
        }

        .content-wrapper button:before {
            content: '';
            position: absolute;
            border-width: 8px 8px 8px 0;
            border-style: solid solid solid none;
            border-color: transparent #416577 transparent;
            top: 8px;
            left: -5px;
        }

        .content-wrapper button:hover:before{
            border-right-color: #e2614c;
        }

        .content-wrapper button:focus:before{
            border-right-color: #c42f2f;
        }    

        .content-wrapper button::-moz-focus-inner {
            border: 0;
            padding: 0;
        }


<!-- language: lang-html -->

    <div id='search'>
        <div class='content-wrapper cf'>
          <form action='/search' id='searchform' method='get'>
    <input id='search-form' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Looking for something?'/>
          <button class='search-button' title='Search' type='submit'><img alt='search button' src='http://4.bp.blogspot.com/-e8Tp2vSgy2c/VpS0vc8zi7I/AAAAAAAAAN0/6rDw0GIVaSg/s1600/mysearch2.png' title='Search'/>
    </button>
    </form>
    </div>
    </div>

I added the HTML code for the search box as well as its CSS to my blog's template and it's showing up nicely until the screen width is more than 600 pixels. Have a look

But as soon as the width becomes 600 px or less, my search box is breaking up and isn't floating on the right, even though there is enough space. I even removed a few sections of my menu and left only "BLOGGER" and MUSIC" and still the search box is breaking out of the div.

Kindly point me where I am going wrong, I'm sure I am going the wrong direction somewhere in the CSS. Thanks in advance.

Answer 1

try to add this solution:

.content-wrapper {
    width: auto;
}
#search {
    position: absolute; // it was relative
}
div#menutop {
    position: relative;
}