When floating a left and right div block, they do not necessarily align on the same line

I am looking to create a nested menu where some of the menu items have key shortcuts that I want to align to the right side on the same line. I attempted to use float left/right, but encountered an issue where the shortcuts were shifted to the next line. How can I resolve this problem?

You can view the code here:

.menu-item-container {}

.vert-menu {
  position: absolute;
  min-width: 180px;
  border: #aaa 1px solid;
  background: white;
}

.menu-item-vert {
  float: none;
}

.menu-item {
  font: 13px Arial, sans-serif;
  height:13px;
  color: black;
  padding: 3px 7px 5px 7px;
  white-space: nowrap;
  position: relative;
  background: white;
}

.menu-item-shortcut {
  float: right;
  padding: 0px 0px 0px 24px;
  position: relative;
  color: #777;
  left: auto;
  right: 5px;
  direction: ltr;
  text-align: right;
}

.menu-item-label {
  float:left;
  position: relative;
}
<div class="menu-item-container vert-menu" style="top: 22px; display: inline;">
  <div class="menu-item menu-item-vert">
    <span class="menu-item-label">New...</span>
    <span class="menu-item-shortcut">Ctr+N</span>
  </div>
  <div class="menu-item menu-item-vert">
    <div class="menu-item-container vert-menu" style="top: 0px; display: inline; left: 180px;">
      <div class="menu-item menu-item-vert">
        <span class="menu-item-label">File</span>
        <span class="menu-item-shortcut">Alt+ F</span>
      </div>
      <div class="menu-item menu-item-vert">
        <span class="menu-item-label">Long text that screws up the shortcut</span>
        <span class="menu-item-shortcut">Shift+Del</span>
      </div>
    </div>
    <span class="menu-item-label">Add</span>
    <span class="menu-item-shortcut">▶</span>
  </div>
</div>

https://jsfiddle.net/meqe4318/8/

htmlcss

Answer №1

You have the option to utilize flexbox instead of relying on floating with the following code:

  1. Include display:flex in the parent element.
  2. Apply margin-left: auto to .menu-item-shortcut
  3. Eliminate the float property from the child elements.

.menu-item-container {}

.vert-menu {
  position: absolute;
  min-width: 180px;
  border: #aaa 1px solid;
  background: white;
}

.menu-item-vert {
  float: none;
  display:flex;
}

.menu-item {
  font: 13px Arial, sans-serif;
  height:13px;
  color: black;
  padding: 3px 7px 5px 7px;
  white-space: nowrap;
  position: relative;
  background: white;
}

.menu-item-shortcut {
  /*float: right;*/
  padding: 0px 0px 0px 24px;
  position: relative;
  color: #777;
  left: auto;
  right: 5px;
  direction: ltr;
  text-align: right;
  margin-left: auto;
}

.menu-item-label {
  /*float:left;*/
  position: relative;
}
<div class="menu-item-container vert-menu" style="top: 22px; display: inline;">
  <div class="menu-item menu-item-vert">
    <span class="menu-item-label">New...</span>
    <span class="menu-item-shortcut">Ctr+N</span>
  </div>
  <div class="menu-item menu-item-vert">
    <div class="menu-item-container vert-menu" style="top: 0px; display: inline; left: 180px;">
      <div class="menu-item menu-item-vert">
        <span class="menu-item-label">File</span>
        <span class="menu-item-shortcut">Alt+ F</span>
      </div>
      <div class="menu-item menu-item-vert">
        <span class="menu-item-label">Long text that screws up the shortcut</span>
        <span class="menu-item-shortcut">Shift+Del</span>
      </div>
    </div>
    <span class="menu-item-label">Add</span>
    <span class="menu-item-shortcut">▶</span>
  </div>
</div>

For more information, check out this answer:

Wondering if you can use flexbox in your project?

Answer №2

SOLUTION 1 - Dealing with text overflow

If you prefer to maintain floats, consider increasing the width and/or setting a max-width for labels (e.g., 88px) with text-overflow styling:

.menu-item-label {
    ..
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 88px;
}


.menu-item-container {}

.vert-menu {
  position: absolute;
  min-width: 180px;
  border: #aaa 1px solid;
  background: white;
}

.menu-item-vert {
  float: none;
 }

.menu-item {
  font: 13px Arial, sans-serif;
  height: 13px;
  color: black;
  padding: 3px 7px 5px 7px;
  white-space: nowrap;
  position: relative;
  background: white;
 }

.menu-item-shortcut {
  float: right;
  padding: 0px 0px 0px 24px;
  position: relative;
  color: #777;
  left: auto;
  right: 5px;
  direction: ltr;
  text-align: right;
}

.menu-item-label {
  float: left;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 88px;
 }
<div class="menu-item-container vert-menu" style="top: 22px; display: inline;">
  <div class="menu-item menu-item-vert">
  <span class="menu-item-label">New...</span>
  <span class="menu-item-shortcut">Ctr+N</span>
  </div>
  <div class="menu-item menu-item-vert">
    <div class="menu-item-container vert-menu" style="top: 0px; display: inline; left: 180px;">
      <div class="menu-item menu-item-vert">
      <span class="menu-item-label">File</span>
      <span class="menu-item-shortcut">Alt+ F</span>
      </div>
      <div class="menu-item menu-item-vert">
        <span class="menu-item-label" title="Long text that messes up the shortcut">Long text that messes up the shortcut</span>
        <span class="menu-item-shortcut">Shift+Del</span>
     </div>
    </div>
    <span class="menu-item-label">Add</span>
    <span class="menu-item-shortcut">▶</span>
    </div>
</div>

SOLUTION 2 - Utilizing margin

If you have the maximum width for the shortcut span set, adjust the label's margin-right accordingly and change the position of the shortcut to absolute:

.menu-item-shortcut {
    ..
    position: absolute;
}
.menu-item-label {
    ..
    margin-right: 70px;
}

This method allows you to display the entire text without being cut off.

Answer №3

I don't mean to offend, but your question reminds me of trying to fit two feet into one shoe without it falling apart.

  1. You could consider increasing the size of the shoe.
  2. Alternatively, you may need to decrease the size of the feet.

Similarly, in your code, you could carefully adjust the size of the container div .menu-item-container (especially since the children are floated), or establish a maximum width for the "Long text that messes with the layout" to prevent it from disrupting other elements and causing them to move to a new line.

Answer №4

.navigation-item-container {
  width: 200px;
}
.navigation-item-label {
  float:left;
  position: relative;
  width: 105px;
  display: block;
  overflow: hidden;
}

Check out the latest changes on this link

Answer №5

Check out this code snippet you provided: 

<div class="menu-item-container vert-menu" style="top: 0px; display: inline; left: 180px;">

Let's modify the style for top:-

<div class="menu-item-container vert-menu" style="top: -22px; display: inline; left: 180px;">

Updated Jsfiddle

Answer №6

<div class="menu-container">
<ul class="menu-main">
<li><a href="#">menu item 1<span class="arrow">&nbsp;</span></a>
<ul class="submenu">
<li><a href="#">submenu item 1</a>
</li>
</ul>
</li>
</ul>
</div>
<style type="text/css">
body {height:100%; margin:0; padding:0;}
a {color:#ffffff; display:block; padding:5px 10px; text-decoration:none;}
img {max-width:100%;}
.menu-container {padding:15px;}
.menu-main {display:block; list-style:none; margin:0; padding:0;}
.menu-main > li {background:#000000; position:relative; width:200px;}
.menu-main > li:hover ul.submenu {display:block;}
span.arrow {background-image:url("http://www.iconsdb.com/icons/preview/gray/arrow-37-xxl.png"); background-position:right center; background-repeat:no-repeat; background-size:100% auto; height:14px; position:absolute; right:2px; top:8px; width:14px; z-index:9;}
ul.submenu {left:100%; margin:0; padding:0; position:absolute; top:0; width:200px; display:none;}
.submenu > li {background:#ff0000;}
</style>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript does not alter the text box for the default dropdown value

My webpage has three elements: a text box named txtSubTotal, a drop-down menu named discount, and another text box called txtGrossTotal. The txtSubTotal updates when the user clicks on the 'ADD' button, while the txtGrossTotal updates based on th ...

javascripthtml

Crafting CSS for styling input type file elements

My attempts to style the input type file with CSS have been unsuccessful. In my current code, the "choose file" button is displaying above my styled button. How can I use CSS to remove this? I am aiming to only display a blue colored button for uploading ...

cssbootstrap-4

Enhance user experience with Bootstrap by automatically adding a frame around a card upon clicking

Hello everyone! I am a beginner in the Angular/Web Development world and I am currently working on improving my HTML/CSS skills. While using Bootstrap in my Angular project, I ran into a challenge that I couldn't figure out on my own. I have implement ...

javascripthtmlcssangularbootstrap-5

Utilizing jQuery for Summation Calculation

How can I use jQuery to calculate the total sum of prices for all products in a table with the column name "price"? Once calculated, how do I store this sum in a variable? <table id ="tab"> <th>Product</th><th>Price</th> ...

jquerycss

Dynamic Font Formatting in Rails Table Based on Conditions

I need to customize the font color of dynamic values based on the state_id. If incident.state_id = 1, the font should be red; if incident.state_id = 2, it should be yellow; and if incident.state_id = 3, it should be green. incident.state_id = 1 : state.na ...

javascriptcssruby-on-railscoffeescript

Exploring the World of Bootstrap 4 Cards

Just starting out in UI/UX, I played around with some gallery transitions featuring hover effects, and incorporated Bootstrap cards into the mix. When I hover over the image (which was blank at first), it now displays an overlay with the intended text, alo ...

cssbootstrap-4responsive-designbootstrap-cards

Guide to adjusting icon placement on top of an image using Bootstrap 4

Is there a way to overlay an icon on top of an image? .item { position: relative; } .des { color: #fff; text-align: left; } <div class="card"> <div class="item"> <img class="card-img-top" src="images/g33.jpg" alt="Avata ...

htmlcssbootstrap-4

"Using jQuery to trigger a click function on elements with the same

Whenever I click the comment link all of the divs are opening but i need that particular only to be opened. HTML: <div> <a href="#" class="ck">comment</a> <div class="cmt"> <input type="text" class="txt"/> ...

jqueryhtml

Accordion border in Bootstrap should be applied to all items except the first one

I am currently implementing Bootstrap accordions in an Angular application and I am facing an issue where I want to have a colored border all around each accordion panel. The problem is that by default, Bootstrap removes the top border from all accordions ...

cssangularbootstrap-5bootstrap-accordion

What purpose does tagging serve in my template for polymer property binding?

I'm currently exploring the way Polymer handles the rendering of properties in a custom element's template. I've come across some interesting behavior that I haven't been able to fully grasp yet. Specifically, I noticed that certain pro ...

javascripthtmlpolymer

Dragging a React <div> using useRef

As a beginner in React, I decided to challenge myself by recreating a classic game like 'space invader'. It seemed like a fun and simple project for someone at my skill level. My goal is to have a spaceship at the bottom of the screen that can s ...

cssreactjsuse-ref

What is the reason for the ID "home-ad" not functioning properly in Firefox?

While working on some CSS styling, I encountered an issue with the ID "home-ad" not displaying properly in Firefox. The box model was showing a content size of 0x-40 (with 40 being the padding value). Interestingly, when I changed the ID name, the code wor ...

htmlcssfirefox

Tips for displaying NoOptionsText in MaterialUI Autocomplete based on a specific condition

When using a Material UI autocomplete feature, the items are selected based on the first 3 letters typed. For example, if you're searching for all "Pedros" in your database, typing "Ped" will bring up results starting with those letters. The issue ar ...

javascripthtmlreactjsautocompletematerial-ui

Is it possible to modify the color of an input tag in a form when it is selected?

I'm currently developing a contact form for my website with bootstrap. The form automatically scrolls to any unfilled required field when the user clicks submit, and highlights it with a blue border. However, I want the border color to change to red i ...

htmlcssformscolorsbootstrap-4

Mobile browsers experiencing issues with playing HTML5 videos

Having trouble with HTML5 Video not working on my mobile device? I've encountered several issues when trying to load videos on my mobile browsers. When I attempted to remove controls, the video wouldn't show up on the mobile browser at all. Addin ...

htmlvideoautoplay

Save hyperlinks in a storage system

I need to store an article in a MongoDB database, and some words within the article should be clickable links leading to other pages. However, when I display the article using an EJS template, the anchor tags I added while writing the article appear as pl ...

htmldatabaseexpressejsanchor

Is this code in line with commonly accepted norms and standards in Javascript and HTML?

Check out this Javascript Quiz script I created: /* Jane Doe. 2022. */ var Questions = [ { Question: "What is 5+2?", Values: ["7", "9", "10", "6"], Answer: 1 }, { Question: "What is the square root of 16?", Values: ["7", "5", "4", "1"], Answer: ...

javascripthtmlprotocols

Tips on crafting tailored CSS styling for targeted div elements such as before and after:

Looking to style specific div elements with the same class name? <div class="main"> <div class="banner_image"> banner 1</div> <div class="banner_image ">banner 2</div> <div class="banner_image ">banner 3</di ...

javascriptjqueryhtmlcss

What is the best way to display an alert box through AJAX technology?

My code snippet is as follows: <script> function updateQty(quantity) { $.ajax({ alert(quantity); }) } </script> Here is the corresponding HTML markup: <form name="quantityForm"> <select name="quantity" id="quantity" onChan ...

javascriptjqueryhtmlajax

Is the background image unable to fill up the entire screen?

I'm currently facing an issue with my webpage's background not covering the entire vertical space. Despite trying different solutions and referring to previous posts, I haven't been able to resolve it yet. Here is the relevant code: <div ...

htmlcss