Flottant div dans l'emballage vers la droite

Question

J'essaie d'avoir mon bouton de menu de navigation aligné sur le bord droit de mon emballage div sur les écrans < 768px, mais je suis incapable de déplacer l'objet sans le faire flotter hors de l'emballage. Comme vous pouvez le voir dans JSFiddle, le navicon apparaît sous mon logo div. Lorsque j'essaie de faire flotter le navicon vers la droite, il apparaît correctement sur le côté droit, mais le bouton est contenu à l'extérieur du wrapper et crée une expérience d'ouverture boguée. Aucune suggestion?

jsFiddle: Floating navicon to right side of wrapper

HTML:

<div class="wrapper"> 
     <div class="nav-wrapper"> 
     <a href="#" id="logo">THIS IS A LOGO</a> 
     <ul id="nav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    </div> 

CSS:

* { 
     margin: 0; 
     padding: 0; 
    } 

body { 
    background-color: #cecece; 
} 

.wrapper { 
      width: 960px; 
      margin-right: auto; 
      margin-left: auto; 
      background-color: #fff; 
     } 



#logo { 
    width: 200px; 

} 

#nav { 
    width: 100%; 

} 



    li { 

    } 

    li:last-child { 
     border-right:none; 
    } 


    li a { 
     display: block; 
     width:100%; 
     background:#000; 
     color: #fff; 
     font-size:1.35em; 
     text-decoration: none; 
     margin-top: 5px; 
    } 

    @media screen and (max-width: 768px) { 
     .wrapper { 
      width: 100%; 

     } 


     #menu { 
      width:1.4em; 
      display: block; 
      background:#ddd; 
      font-size:1.35em; 
      text-align: center; 

     } 

     #logo { 
      float: none; 
     } 

     #nav.js { 
      display: none; 
     } 
     ul { 
      width:100%; 
      list-style:none; 
     } 
     li { 
      width:100%; 
      border-right:none; 
     } 
    } 

    @media screen and (min-width: 768px) { 

     #nav-wrapper { 
      background-color: #fff; 
      overflow-x: visible; 
      width: 100%; 
      background-repeat: repeat; 
     } 

     #logo { 
      float: left; 
     } 

     ul { 
     width:100%; 
     overflow: visible; 
     background-color: #fff; 
     height: 40px; 

    } 

    li { 
     display: inline-block; 
     padding: 0 20px; 

    } 
     #menu { 
      display: none; 
     } 
    } 

jQuery:

$("#nav").addClass("js").before('<div id="menu">&#9776;</div>'); 
$("#menu").click(function(){ 
    $("#nav").slideToggle(); 
}); 
$(window).resize(function(){ 
    if(window.innerWidth > 768) { 
     $("#nav").removeAttr("style"); 
    } 
}); 

Answer 1

Ajouter ce css:

.wrapper {overflow:hidden;} 
#menu {float:right;} 

Le overflow:hidden forcera le .wrapper div à considérer la hauteur #menu même si elle est flottante.

http://jsfiddle.net/wXa95/1/