CODEWITHSUNDEEP
javascriptjquerycsshtml
Raphael Jeger
Raphael Jeger

Reputation: 5232

Add elements to non-wrapping container, overflowing on left side

I need to add elements to a container using JS. When the total width of the inner elements is bigger than the width of the wrapping DIV, the leftmost element should disappear to the left side.

I thought I'd be able to get the desired effect by using 

p {
    border: 1px solid red;
    display: inline-block;
    float: left;
    margin: 1px;
    padding: 0;
    white-space: nowrap;
}

but it doesn't work, because elements are floating to the next line.

Fiddle: http://jsfiddle.net/RqU3E/2/

Thankful for any advice!

Upvotes: 2

Views: 82

Answers (2)

chaenu
chaenu

Reputation: 2025

What about this solution?

You need to wrap the container with an element that has a fixed width/height and overflow:hidden:

width: 200px;
height: 23px;
overflow: hidden;
position: relative;

As soon as the width of the container is bigger than the width of the wrapper, align the container to the right side of this wrapper (via JS):

position: absolute;
right: 0px;

Upvotes: 1

Nitesh
Nitesh

Reputation: 15779

Here is the solution.

changes to CSS:

.container{display:table;}

Hope this helps.

Upvotes: 0

Related Questions