Wrap when the browser width is too short to have everything inline

Question

I'm designing a simple top-menu with a logo on the left, and inline-links on the right:

* { margin:0; padding: 0; }
#header { background-color: grey; }
#right { background-color: blue; float:right; }
#left { background-color: green; float:left; }
li { display:inline-block; padding: 0 30px; }

 <div id="header">
   <div id="left">LOGOLOGOLOGOLOGOLOGOLOGO</div> 
   <div id="right">
     <ul>
       <li>Link 1</li>
       <li>Link 2</li>
       <li>Link 3</li>
       <li>Link 4</li>
      </ul>
   </div>
 </div>

I would like that :

• when the browser width is enough for everything to be inline, the links-list should be aligned on the right (float: right)

• when the browser width is not enough for everything to be inline, the links-list should be aligned on the left

How to do it with my code mentioned before?

---

Note: I would like the "wrap effect" to appear exactly when

width(#left)+width(#right)>width(browser)

and not with something static like width(browser)<300px.

Answer 1

$(document).ready(function(){
 $( window ).resize(function(){
var lwidth=parseInt($('#left').css('width'));
var rwidth=parseInt($('#right').css('width'));
var fwidth=lwidth+rwidth;
var swidth=$(window).width()
if (fwidth > swidth){
    $('#right').css('float','left');}
else{$('#right').css('float','right');;}
});
 
});

* { margin:0; padding: 0; }
#header { background-color: grey; }
#right { background-color: blue; float:right; }
#left { background-color: green; float:left; }
li { display:inline-block; padding: 0 30px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="header">
   <div id="left">LOGOLOGOLOGOLOGOLOGOLOGO</div> 
   <div id="right">
     <ul>
       <li>Link 1</li>
       <li>Link 2</li>
       <li>Link 3</li>
       <li>Link 4</li>
      </ul>
   </div>
 </div>

check on load, if width(#left)+width(#right)>width(browser) then change div#right float from right to left.

     $( window ).resize(function(){
    var lwidth=parseInt($('#left').css('width'));
    var rwidth=parseInt($('#right').css('width'));
    var fwidth=lwidth+rwidth;
    var swidth=$(window).width()
    if (fwidth > swidth){
        $('#right').css('float','left');}
else{$('#right').css('float','right');;}
    });

Answer 2

Media queries don't support individual elements yet, so you're going to have to use Javascript to do this.

I would suggest using css-element-queries. It allows you to write element based media queries so you don't have to write any javascript.

If you want to do it yourself, when the doc has loaded, use something like

  if (document.getElementById('left').offsetWidth + document.getElementById('right').offsetWidth > window.innerWidth) {
      //apply styles using javascript
  }

To do this when the window resizes:

  window.onresize = function(event) {
      if (document.getElementById('left').offsetWidth + document.getElementById('right').offsetWidth > window.innerWidth) {
        //apply styles using javascript
      }
  };