float: left and float: right divs(block) doesn't fit on one line

Question

I want create nested menu. Some menu items have key shortcuts which i try to place on the same line but aligned to right side. I tried to use float left/right for that, but I have problem with placing shortcut, they shifted to next line. How can i work around it?

You can see 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/

score 4 · Answer 1 · edited May 23 '17 at 11:44

You can use flexbox instead of floating like the below code:

Add display:flex to the parent.
Add margin-left: auto to .menu-item-shortcut
Remove the float property from the children.

.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>

Reference answer: https://stackoverflow.com/a/22429853/863110

Can I use flexbox

Thanks!!! It works good with flexbox. But i also want to know if exist also solution with float or inline/inline-block? — EdSv, Jun 30 '16 at 11:12
And how browser calculate block width for such cases when width isn't specified and depends on content. I am a little bit confused different calculation of width for div and nested div with the same css. Maybe link to good article about it. — EdSv, Jun 30 '16 at 11:16
@EdSv I'm glad to hear:) Comment 1: I don't think so. Maybe with `display:table-cell`. Comment 2: The width calculation depends the style. It's not matter if the divs have same style. You can read more about `floating`: https://css-tricks.com/all-about-floats/. and `display`: https://css-tricks.com/almanac/properties/d/display/ — Mosh Feu, Jun 30 '16 at 11:34

tomafeha · Answer 2 · 2016-06-30T11:55:29.677

SOLUTION 1 - With text-overflow

If you want to keep floats choose a bigger width and/or give labels a max-width (88px in your case) and text-overflow:

.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 screws up the shortcut">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>

SOLUTION 2 - With margin

If you know what is the max width the shortcut span will take, you can assign this value to label's margin-right, and change shortcut's position to absolute:

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

This way you can keep the whole text.

score 0 · Answer 3 · answered Jun 30 '16 at 10:31

0

Please don't get me wrong, but your question sounds like "how do I get two feet in one shoe, without it tearing apart".

Either you have to increase the size of the shoe.
Or you need to reduce the size of the feet.

So in terms of your code, either you have to set the size of the container div .menu-item-container discreetly(specially since the children are floated ), or you need to set a max width for the "Long text that screws up the shortcut" so that instead of pushing other elements down it itself switches to a new line.

answered Jun 30 '16 at 10:31

Mohd Abdul Mujib

13,071
8
64
88

I don't want to set width for .menu-item-container, i need adjusting to content. Concerning sizes it is not too big even for one shoe, also if we copy long content 'Long text that screws up the shortcut' and put it in outer menu instead 'Add' or 'New..' adjusting will happens! so problem not in length. – EdSv Jun 30 '16 at 10:49

score 0 · Answer 4 · answered Jun 30 '16 at 10:35

0

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

Updated your https://jsfiddle.net/meqe4318/14/

answered Jun 30 '16 at 10:35

spirit

3,265
2
14
29

score 0 · Answer 5 · answered Jun 30 '16 at 10:52

Try this u have given code like:- <div class="menu-item-container vert-menu" style="top: 0px; display: inline; left: 180px;">

Pls Change style for top:-

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

changed Jsfiddle

score 0 · Answer 6 · answered Jul 01 '16 at 05:46

<div class="nav-container">
<ul class="nav-main">
<li><a href="#">nav 1<span class="arrow">&nbsp;</span></a>
<ul class="child">
<li><a href="#">nav child 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%;}
.nav-container {padding:15px;}
.nav-main {display:block; list-style:none; margin:0; padding:0;}
.nav-main > li {background:#000000; position:relative; width:200px;}
.nav-main > li:hover ul.child {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.child {left:100%; margin:0; padding:0; position:absolute; top:0; width:200px; display:none;}
.child > li {background:#ff0000;}
</style>

float: left and float: right divs(block) doesn't fit on one line

6 Answers6