When the browser width is insufficient to display everything side by side, items will wrap to the next

Question

When the browser width is insufficient to display everything side by side, items will wrap to the next

I'm working on a sleek top menu design that features 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 want to ensure that:

when the browser width allows for everything to be inline, the list of links should align to the right (float: right)
when the browser width does not allow for everything to be inline, the list of links should align to the left

How can I achieve this using the code mentioned above?

Note: The "wrap effect" should only occur precisely when

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

and not based on a static value like width(browser)<300px.

css

Answer 1

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>

Inspecting on page load, in case

width(#left) + width(#right) is greater than width of browser

, then modify the CSS property float of div#right 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

$(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>

Inspecting on page load, in case

width(#left) + width(#right) is greater than width of browser

, then modify the CSS property float of div#right 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 3

Answer №2

At the moment, media queries do not have support for individual elements, so you will need to rely on Javascript to accomplish this.

An alternative solution is to use a library like css-element-queries. This allows you to create element-specific media queries without the need for writing additional javascript code.

If you prefer to do it manually, you can utilize the following code snippet when the document loads:

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

To ensure this functionality is maintained when the window is resized, include the following code:

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

Answer 4

At the moment, media queries do not have support for individual elements, so you will need to rely on Javascript to accomplish this.

An alternative solution is to use a library like css-element-queries. This allows you to create element-specific media queries without the need for writing additional javascript code.

If you prefer to do it manually, you can utilize the following code snippet when the document loads:

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

To ensure this functionality is maintained when the window is resized, include the following code:

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

When the browser width is insufficient to display everything side by side, items will wrap to the next

Answer №1

Answer №2

Similar questions

Issue with JavaScript Variable Not Reflecting Changes in Progress Bar

Having trouble getting my local website to load the CSS stylesheet through Express and Node.js in my browser

What is the best way to implement Bootstrap in Coda2?

What is the functionality of intro.js?

`finding difficulty in presenting components in react`

The HTML elements in my JSX code seem to constantly shift around whenever I resize my webpage

Empty array returned when using wrapper.classes() with Vue-test-utils and CSS modules

The color of hyperlinks in firefox varies based on the specific URL being visited

Adjust the color palette size when the zoom level is modified in the responsive mode within Angular

Using an Icon Button within a Material Card in React

Encountered an error in Angular1: TypeError - promise.catch does not exist as a

Tips for overlaying an image on a div regardless of its height

Disabled button in Bootstrap4 displaying the wrong color as white instead of the intended color

What is the best way to showcase images along with their captions in a horizontal layout

Damaged background in Bootstrap interface modal

Dragging an image within a div using JQueryUI

Focus border radius for anchor tag image

All hyperlinks are displayed as a single entity

Reposition the element at the bottom of its parent element

two divs side by side with adjustable sizes