Position child element at baseline and flush right within list (`
`) item

Question

I want the price of coffee to come at the right end of the coffee name i.e 1.80 price should come in line of Americano. Similarly 10.00 price should come in line of Macchiato.

ul {
  list-style: none;
  padding: 5px;
  margin: 0;
}
ul#container {
  width: 18%;
  min-width: 100px;
  max-width: 400px;
  border: 15px solid #886633;
  border-radius: 5px;
  background-color: orange;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
}
#container li {
  border-bottom: 1px dashed blue;
}
#container > li {
  font-size: 2em;
  border-bottom: 1px solid black;
}
em {
  float: right;
  position: relative;
  bottom: 0px;
}
span {
  width: 100px;
  display: inline-block;
}

<ul id="container">
  <li>DRINK MENU
  <ul>
    <li><span>Latte</span><em>2.79</em>
    </li>
    <li><span>Cappucino</span><em>2.99</em>
    </li>
    <li><span>Cafe Americano</span><em>1.80</em>
    </li>
    <li><span>Espresso</span><em>2.00</em>
    </li>
    <li><span>Carmel Macchiato</span><em>10.00</em>
    </li>
  </ul>
</li>
</ul>

As you can see i am using relative position, but its not working. Can you solve this without absolute position and minimum changes to the code?
Just tell me why is relative position not working.

Your HTML is not valid. Your inner `ul` is nested impropertly. Your code renders fine in Chrome, but messed up in jsfiddle. Consider cleaning that up first. — Michael Benjamin, Jul 27 '15 at 14:20
@leo.fcx absolute position removes the element from the flow, i am making a responsive web design. It needs to adjust according to window size. — Varun Jain, Jul 27 '15 at 14:21
@VarunJ, your prices would be absolutely positioned within the `
@Michael_B it works fine in jsfiddle. Check this [link](http://jsfiddle.net/9kjpnfos/1/) — Varun Jain, Jul 27 '15 at 14:25
proper way to nest an unordered list: http://stackoverflow.com/questions/5899337/proper-way-to-make-html-nested-list — Michael Benjamin, Jul 27 '15 at 14:25
@Michael_B it works fine in safari, chrome and firefox. What else i want? — Varun Jain, Jul 27 '15 at 14:32
If your question has been answered by somebody, then give it a checkmark and an upvote. If not, I'll give it a go. — Michael Benjamin, Jul 27 '15 at 14:33
Outside of the code, note that "Cappuccino" is spelled incorrectly ;-) — Michael Benjamin, Jul 27 '15 at 17:22

Pete · Accepted Answer · 2015-07-27T15:02:32.563

2

First you need to fix your html - the closing li for the DRINK MENU should be after the nested ul.

Then I would make use of display:table css:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul#container {
  width: 18%;
  min-width: 100px;
  max-width: 400px;
  border: 15px solid #886633;
  border-radius: 5px;
  background-color: orange;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
}
#container > li {
  padding: 5px;
}
#container ul {
  border-top: 1px solid black;
  margin-top: 5px;
}
#container ul li {
  border-bottom: 1px dashed blue;
  display: table;
  width: 100%;
}
#container span,
#container em {
  display: table-cell;
  vertical-align: bottom;
  padding: 3px 0;
}
#container em {
  text-align: right;
}

<ul id="container">
  <li>DRINK MENU
    <ul>
      <li><span>Latte</span><em>2.79</em>
      </li>
      <li><span>Cappucino</span><em>2.99</em>
      </li>
      <li><span>Cafe Americano</span><em>1.80</em>
      </li>
      <li><span>Espresso</span><em>2.00</em>
      </li>
      <li><span>Carmel Macchiato</span><em>10.00</em>
      </li>
    </ul>
  </li>
</ul>

UPDATE

As per your comments about overflow. There are a couple of ways to fix this:

Increase the min width of ul#container to something that will accommodate the longest line - in this case a width of 125px should suffice: Fiddle example
Add table-layout:fixed to your table li and add word-wrap:break-word to the span: Fiddle example

edited Jul 27 '15 at 15:02

answered Jul 27 '15 at 14:17

Pete

57,112
28
117
166

Your answer does not solve in jsfiddle. The price is overflowing and its not in line with the coffee name. I purposely gave less space to coffee name, so that it takes two lines. BTW you were right about my
not closing in right place.

Varun Jain

Jul 27 '15 at 14:42

See edited answer, I have also changed it so the prices are aligned to the bottom – Pete Jul 27 '15 at 15:02

You did a miracle with three line of code. I am choosing this a correct answer. If you know why did relative position didn't work then do answer. – Varun Jain Jul 27 '15 at 15:22

I think with the relative positioning, when the container gets too small, it will always "push" one of either the span or em onto the next line - in this case as you have floated the em, the span gets pushed down. Again the overflowing will be because of the width being too small and you wouldn't be able to vertical align the price to the bottom as you would want – Pete Jul 27 '15 at 15:25

You used 'table' and 'table-cell'. Why didn't you use 'table-row'. Is it not necessary, can it be omitted. – Varun Jain Jul 28 '15 at 05:28

Yeah, not really needed unless you are wanting multiple rows. I guess to be absolutely semantic, you could make the `ul` table, the `li` table-row and the `span`s and `em`s table-cell – Pete Jul 28 '15 at 07:40

Ferrmolina · Answer 2 · 2015-07-27T14:15:19.420

1

You can add a class to the <em>

HTML

<ul id="container">
<li>DRINK MENU</li>
    <ul>
        <li><span>Latte</span><em>2.79</em></li>
        <li><span>Cappucino</span><em>2.99</em></li>
        <li><span>Cafe Americano</span><em class="bottom">1.80</em></li>
        <li><span>Espresso</span><em>2.00</em></li>
        <li><span>Carmel Macchiato</span><em class="bottom">10.00</em></li>
    </ul>
</ul>

CSS:

ul{ 
    list-style: none;
    padding: 5px;
    margin: 0;
    }
ul#container{
    width: 18%;
    min-width: 200px ;
    max-width: 400px;
    border: 15px solid #886633;
    border-radius: 5px;
    background-color: orange ;
    box-shadow: 4px 4px 8px rgba(0,0,0,.3);
    }
#container  li{
    border-bottom: 1px dashed blue;
    }
#container > li{
    font-size: 2em;
    border-bottom: 1px solid black;
    }
em{
    float: right;
    position: relative;
    bottom: 0px;
    }
.bottom {
    position: relative;
    top:15px;
}
span{
    width: 100px;
    display: inline-block ;
    }

DEMO

Another posible solution (maybe the best practice):

CSS:

li:nth-child(3) > em, li:nth-child(5) > em{
    position: relative;
    top:16px;
}

DEMO

edited Jul 27 '15 at 14:15

answered Jul 27 '15 at 14:09

Ferrmolina

2,737
2
30
46

This will solve the current situation but what about future entries, and what if the coffee name goes to the third line. I wonder why does relative position does not work. – Varun Jain Jul 27 '15 at 14:15
I added another solution, using `:nth-child` – Ferrmolina Jul 27 '15 at 14:15
this n-th child is even more specific, what if the menu changes and price in question is not in same row anymore. I am looking for something "bulletproof" – Varun Jain Jul 27 '15 at 14:18
I only answered and find a solution to your current problem. The answer of @Pete maybe is appropriate in your "future" case, use `display-table` to make this `
– Ferrmolina Jul 27 '15 at 14:20
Thanks for your reply. I appreciate the contribution :). BTW how to chat one on one? – Varun Jain Jul 27 '15 at 15:41

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

Along with your questions, I've taken your comments into consideration in preparing this answer.

First, your HTML was invalid. The list was nested improperly so I corrected that that in my answer.

In answer to your first question...

how to position the prices at the baseline

... absolute positioning will work and will not prevent your price card from adjusting to different browsers, platforms or devices. It will be as responsive as the container it is in. Of course, you should test your code to make sure it works as intended.

Note that for position: absolute to work properly you must set the parent element to position: relative. This is because absolute positioning will move the element – in this case the em – relative to its closest positioned ancestor (which in this case should be the li). If the absolutely positioned element doesn't find a positioned ancestor, it will position the element relative to the <body>. So bottom line:

To absolutely position a child element, set the parent element to position: relative.

Here's an example using your code.

DEMO

HTML

<!-- with corrections to improperly nested list -->
<div id="container">
    <h2>DRINK MENU</h2>
    <ul>
        <li><span>Latte</span><em>2.79</em></li>
        <li><span>Cappucino</span><em>2.99</em></li>
        <li><span>Cafe Americano more text more text more text more text</span>
        <em>1.80</em></li>
        <li><span>Espresso</span><em>2.00</em></li>
        <li><span>Carmel Macchiato more text more text more text more text</span>
        <em>10.00</em></li>
     </ul>
</div>

CSS

/* based on your original code */

#container {
  width: 200px;
  border: 15px solid #886633;
  background-color: orange;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
   padding: 5px;
}
h2 {
  width: 99%;
  border-bottom: 1px solid black;
  margin: 0;
}
ul {
  list-style: none;
  padding: 5px;
  margin: 0;
}
#container ul li {
    font-size: 1em;
    font-weight: bold;
    border-bottom: 1px dashed blue;
    position: relative;
}
span {
  width: 100px;
  display: inline-block;
}
em {
  position: absolute;
  bottom: 0;
  right: 0;
}

In answer to your second question...

Just tell me why is relative position not working.

Actually, it's working fine. In the normal flow of things, it's positioned exactly where it belongs. Your descriptions are breaking to a new line because of the margin limitation you set in your span.

That being said, the em can still be positioned with position: relative. Change the value from 0. Your prices will (as defined by your style rule) move up or down as a group, depending on whether you use positive or negative numbers.

Your CSS rule:

em {
  float: right;
  position: relative;
  bottom: 0px;

/* test these individually:
bottom: 25px;
bottom: -25px;
right: 25px;
right: -25px */
}

For more about positioning see the position article at MDN.

I see your are correct about absolute position, it worked nicely. I still don't understand why relative position didn't work. I guess my theory is not clear about relative. P.S. i already gave tick to another answer, so it will be rude to remove it. — Varun Jain, Jul 27 '15 at 16:40
Not asking you to remove it. But I appreciate the thought. Read the article I included about the `position` property. Also read about Normal Flow. With that knowledge, some experience, and lots of testing, it will become clear. Btw, I use Chrome Dev Tools for testing variations, which is often very helpful. — Michael Benjamin, Jul 27 '15 at 16:47
This is off topic but how can i chat one on one to you or somebody else. I just earned the chat badge :) — Varun Jain, Jul 27 '15 at 16:48
@VarunJ, you're not responding in the chat room. Let me know, otherwise I need to move on. — Michael Benjamin, Jul 27 '15 at 16:58

Position child element at baseline and flush right within list (``) item

3 Answers3

Position child element at baseline and flush right within list (`
`) item