html - Stop 2 floating DIVS from collapsing while inside another -

It can be really simple but I can not wrap my head around it.

css

  #nav_bar {max-width: 1000px; Height: 41px; Margin: 0 auto; Background color: yellow; } # Left {float: left; Minimum-width: 200px; Height: 41px; Background color: red; } #right (float: right; minimum-width: 500px; height: 41px; background color: black;}  

HTML

  
 
 
 
 
  & lt I will explain it in colors, in fact I want the red box to float the left and right box so that the float can be floated inside the yellow box. Even when I shorten the browser window everything collapses and the black box goes down to red. (Outside the yellow color). I know it looks very basic, but I should not fall even this, I will be happy if it does not move at all and the browser scrolls horizontally evenly As it normally becomes too small for window content  
 
 
  
 
 
 You must have  #nav_bar  enough minimum width to accommodate two small elements: 
 
  #nav_bar {... min-width: 700px; }