Question

You can see the implementation here: http://jsfiddle.net/kqKfK/

I am trying to get everything in one line – with the span “2-up” at the far right. It would also be nice if each of the internal divs are equally spaced amongst themselves.

Edit: This is how I want it to look:

Edit 2: This is how it looks after the implementation of Kyle’s suggestion. I would like for it to be aligned properly:

Edit 3: This is how it looks after Kyle’s second implementation.

Answer 1

Float them left:

#viewbar div
{
    float: left;
}

Example.

---

#viewbar div
{
    float: left;
    width: 25%;
    border-right: 1px solid #000;
}

Updated example. Changed a few things in your original code too.

---

After your comment, try this:

#viewbar div
{
    float: left;
    width: 25%;
    border-right: 1px solid #000;
    background-image: url(path/to/file.png);
    background-position: center;
}

Another example.

---

After you provided the full example, I came up with this, looks very much like the screenshot you posted.

Click here to see my example. I changed a lot of things, including equal heights on each div, adding margins and padding 🙂