title: How to stop divs from moving below each other when window is resized?
body: <p>I have a wrapper at the top of my web page that spans the whole width.</p>
  
  <p>Within it are a logo (floated left) a navbar (centered) and some social media buttons (floated right) when I minimize the page, I want all the items to remain where they are (relative to the page. i.e. navbar remains centered, social buttons floated right) until they meet each other.</p>
  
  <p>At which point I want them to actually remain where they are (as if it was now a fixed layout) as the page continues to get smaller. Currently, when they meet, the social media buttons move below the navbar and then the navbar moves below the logo.</p>
  
  <p>An example here :</p>
  
  <p><img src="https://i.stack.imgur.com/DiuuG.png" alt="enter image description here"></p>