Make div content disappear to the left

Question

I have the following setup

<div class="bar">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
</div>

with css

.bar>div {
    display: inline-block;
    margin-left: 10px;
}

I want to make it so that if div.bar gets too small, its children disappear to the left. So "one" disappears first (completely or just partially).

My css knowledge is minimal so I don't even know where to start. I tried using overflow but to no success. I'm assuming it doesn't get triggered as inline-block automatically wraps.

@Stickers in your "duplicate" mark, kindly point me to the answer that deals with block elements instead of text, and that doesn't align everything on the right side should the container be too big. — andyb, Jan 25 '18 at 04:01
It's more or less same as https://stackoverflow.com/a/12646655/483779 — Stickers, Jan 25 '18 at 13:36

score 1 · Accepted Answer · 2018-01-25T10:30:18.257

1

Try giving class to each div and use float for container and child divs instead of inline-block and they will disappear to right while keeping the horizontal line and text-alignment keep on the left.

you can check working Jsfiddle

<div class="bar">
    <div class="numbers">one</div>
    <div class="numbers">two</div>
    <div class="numbers">three</div>
    <div class="numbers">four</div>
    <div class="numbers">five</div>
    <div class="numbers">six</div>
    <div class="numbers">seven</div>
    <div class="numbers">eight</div>
    <div class="numbers">nine</div>
    <div class="numbers">ten</div>
    <div class="numbers">eleven</div>
    <div class="numbers">twelve</div>
</div>

and the .css part

.bar
{
  height: 20px;
  overflow: hidden;
  float: left;
}

.bar>div:hover
{
  cursor: pointer;
  color: white;
}

.numbers
{
  float: right;
  background-color: yellow;
  width: 50px;
}

edited Jan 25 '18 at 10:30

answered Jan 25 '18 at 02:07

1

@JohnF. you need to update the answer to explain how you achieved the desired result. Right now the desired result has nothing to do with the display being set to inline-block and you can achieve the same thing without giving the child divs a classname so if you want your answer to be accepted please explain how the result was achieved. – Steve K Jan 25 '18 at 02:51
I unaccepted again because your jsfiddle does not represent what you said in your answer. There has been a lot of clearing up misunderstandings since your text-draft of the answer. – andyb Jan 25 '18 at 02:51
@SteveK I updated the answer. The inline-block is not necessary as he must use float. I also updated the jsfiddle and now it's working as the OP wants. – Jan 25 '18 at 10:31
@andyb ok today I updated the answer and updated the explanation too. The jsfiddle is working example of what you want, and the description explains how you can achieve this result. please re-accept the answer thank you. – Jan 25 '18 at 10:35

Make div content disappear to the left

1 Answers1