html - Why when applying a float:right; in this specific case does it cause the div to go under the previous div? -

i'm trying have div float right when applying float:right , making page size smaller browser div goes under previous div.

https://jsfiddle.net/crystalwolf/bku2f08c/1/

html

<div id="container">   <div id="navbar-container">     <div id="mainlogo">     </div>     <div id="sublogo">       subtitle test     </div>     <div id="navbutton-container">       <div class="navbutton navcurrent">         home       </div>       <div class="navbutton">               </div>       <div class="navbutton">         web design       </div>       <div class="navbutton">         programming       </div>       <div class="navbutton">         graphic design       </div>       <div class="navbutton">         contact       </div>     </div>   </div>   <div id="carousel">   </div> </div> 

css

#container {   width: 100%;   height: 100%; }  #navbar-container {   position: fixed;   background-color: white;   width: 100%;   height: 100px;   padding: 15px;   color: white;   padding-left: 60px;   margin-left: auto;   margin-right: auto;   padding-left: 50px;   padding-right: 50px;   min-width: 1200px;   overflow: hidden;   white-space: nowrap; }  #mainlogo {   color: #373c40;   font-size: 50px;   font-weight: 700;   text-transform: uppercase;   position: relative;   float: left;   display: inline-block;   padding-left:50px; }  #sublogo {   color: #373c40;   font-size: 15px;   font-weight: 700;   text-transform: uppercase;   position: relative;   float: left;   padding: 25px;   display: inline-block; }  #carousel {   background-image: url("http://3nacu.com/unique/images/stars.png");   width: 100%;   height: 500px; }  #navbutton-container {   margin-top: 10px;   background-color: white;   height: 50px;   padding-left: 50px;   float: right;                  //this specific float right   display: inline-block;   padding-right:50px; }  .navbutton {   display: inline-block;   vertical-align: top;   height: 50px;   padding: 15px;   padding-left: 20px;   padding-right: 20px;   text-decoration: none;   color: #373c40;   -o-transition: .5s;   -ms-transition: .5s;   -moz-transition: .5s;   -webkit-transition: .5s;   transition: .5s;   cursor: pointer;   text-transform: uppercase;   font-weight: 700; }  .navbutton:hover {   background-color: #373c40;   color: white; }  .navcurrent {   background-color: #b39eb5;   color: white; } 

e.g have browser @ 1920 on result , it's on 1 line. make considerable amount shorter proceeds go under previous div instead of enabling horizontal scroll bar.

this expected behavior, floated elements break if there's not enough room them inside container. if want scrollable overflow instead, need give container fixed width (e.g. 1200px instead of 100%) large enough fit floated elements.