How do I align these 3 divs and a span? - html

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 :)

Answer 2

Try this:
.compv-navbar {
font-weight: bold;
background: #f9f4c0;
height: 23px;
width: 220px;
border: 1px solid #c97d7d;
word-spacing: 0px;
letter-spacing: 2px;
margin: 0 auto 5px; /* top, right, bottom, left */
padding: 5px 0px 7px 0px; /* top, right, bottom, left */
text-align: center;
}
#two-up-icon {
width: 40px;
height: 17px;
float: left;
}
#two-up-icon:hover {
color: #ddd;
cursor: pointer;
}
#three-up-icon {
width: 40px;
height: 15px;
float: left;
}
#three-up-icon:hover {
color: #ddd;
cursor: pointer;
}
#four-up-icon {
width: 40px;
height: 15px;
float: left;
}
#four-up-icon:hover {
color: #ddd;
cursor: pointer;
}
.view_name {
font-family: "Helvetica", serif;
color: #f9f4c0;
font-style: normal;
font-weight: bold;
font-size: 11px;
word-spacing: 0px;
letter-spacing: 0px;
background: #1a1a1a;
padding: 1px 3px 1px 3px; /* top, right, bottom, left */
border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
float: right;
margin-right: 3px;
}
http://jsfiddle.net/kqKfK/10/

Answer 3

just add one more style:
.compv-navbar div { float: left; top: 0; }

Answer 4

One line of CSS:
#viewbar div, #viewbar span { width: 25%; float: left; }
Updated jsFiddle: http://jsfiddle.net/yahavbr/kqKfK/2/
Edit: By the way, alt is only for images, other elements should use the title attribute instead.
Edit II: if you have anything after that div, put such thing before to clear the "floatness":
<div style="clear: both;"></div>