Question

I’m doing a time bar for my project, what I’m trying to achieve here is something like this:

                                                         / <- Screen margin
+-------------------------------------------     -------+\
| +---------+    +---------+    +---------+        +----|/---+
| | 12:00PM |    | 01:00AM |    | 02:00AM |  ....  | 11:|\PM |
| +---------+    +---------+    +---------+        +----|/---+
+-------------------------------------------     -------+\
                                                         /

Those elements are actually images (they have gradients and stuff), not text, they have a margin to the next one and they’re set to float left so everything is working alright. Well, almost. Problem is, as you see in the “image”, the last one may (and I actually want this exact behavior) get cut.

The only things I’ve managed to achieve are having the last element appear on the next line, somewhere below the 12:00PM of the image, or having it completely disappear, I just can’t manage to make it stay where it is just only showing what should be seen. I have tried using white-space: nowrap and overflow: hidden to no avail.

My current CSS styles for these elements are as follow:

#timebar{
    position: absolute;
    width: 6672px;
    height: 33px;
    top: 0px;
    left: 187px;
    background-image: url("../images/timebar.png");
    border-right: 1px black solid;
    z-index: 1;
}
.time_element{
    width: 57px;
    height: 18px;
    margin-left: 221px;
    margin-top: 8px;
    list-style: none;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/* THIS IS FILLED DYNAMICALLY VIA JAVASCRIPT */);
    float: left;
    -webkit-transform: translateZ(0);
}

Can someone give me a hint?

Answer 1

I suggest that you put your time elements inside an inner container with its width being larger than the total width of the time elements. Then put this container inside your timebar and apply overflow: hidden to the timebar. This way you would not experience the time elements wrapping.

Calculate the width of the inner container dynamically using JavaScript if the time elements are dynamic. If there is a static amount of them then you can just apply the width using css.

If you need to show the cut off time elements scroll the inner container using margin-left with negative values on the inner container.