5 divs in one row, can't align them in one line

Question

I'm quite new on web development. I'm struggling with this question for a while. Now I post my question(s) here.

The souce code is as linked: Source Code

The HTML:

    <div id="wrap">
      <div id="main" class="clearfix">

        <ul class="ranklist" id = "ranklist">
      <li class="ranklistitem font-size-0">
        <div class="itemnumber divinline"> <span class="helper"></span>1</div>
        <div class="userprofile divinline"><img class="profileimg" src=""/></div>
        <div class="nameandcredit divinline">
          <div class="username">SteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteve</div>
          <div class="credit">I'm description</div>
        </div>
        <div class="ranktitle divinline">Total:</div>
        <div class="usercredit divinline">1000</div>
      </li>
      </ul>
    </div>
</div>

The CSS:

    * {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
html {
    background: #aaaaaa;    
}

body {
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    font-family: "PingHei", "Helvetica Neue", "Helvetica", Arial, "Microsoft YaHei";
    font-weight: lighter;
}
#wrap {
    min-height: 100%;
}
#main {
    overflow-y: auto;
    padding-bottom: 55px;
}

div, ul, p {
    padding: 0px;
    margin: 0px;
    color: #ffd8d0;
}

.rewarddes
{
    margin-top:10px;
    display:block;
    color:#ffdcc5;
    overflow:hidden;
    font-size:87.5%;
}
.ranklistitem {
    height: 60px;
    border-bottom: solid 1px #faa559;
    font-size:87.5%;
}
.font-size-0 {

}
.divinline {
    display: inline-block;
    vertical-align: top;
    padding: 0px;
    margin: 0px;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.itemnumber {
    line-height: 60px;
    height: 60px;
    background:#aa8800;
    width: 6%;
    text-align: right;
    padding-right: 5px;
}
.userprofile {
    line-height: 60px;
    height: 60px;
    width: 14%;
    text-align: center;
    vertical-align: middle;
    background:#228845;
}
.profileimg {
    height: 36px;
    width: 36px;
    vertical-align: middle;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border: solid 2px #fff;
}
.nameandcredit {
    height: 60px;
    width: 45%;
    padding-left: 5px;
    background:#342389
}
.username {
    height: 55%;
    text-align: left;
    vertical-align:bottom;
    overflow:hidden;
}
.credit {
    height: 25%;
    font-size: 66.7%;
    text-align: left;
    overflow:hidden;
    color:#fdff6e;
}

.username:before, .credit:after {
    content:'';
    height:100%;
    vertical-align:middle;
    display:inline-block;
}

.iconaward {
    vertical-align: middle;
    height: 20px;
    width: 14px;
}
.ranktitle {
    line-height: 60px;
    height: 60px;
    width: 15%;
    background:#cd8912;
    text-align: right;
    padding-right: 0.125em;
}
.usercredit {
    line-height: 60px;
    height: 60px;
    background:#ff0000;
    width: 20%;
    text-align: right;
    padding-right: 0.5em;
}

I have 2 questions based on the linked(or above) code.

1. The 5 container div's width was set as: .itemnumber 6%, .userprofile 14%, .nameandcredit 45%, .ranktitle 15%, .usercredit 20%. So in total they are 100%. But as you see, the last one .usercredit is not in the same line and there're margins between each div, which is not what I want.

2. for the .username, I have set overflow:hidden, but as you see, when there's a large string, the .username was totally disappeared. If there're spaces in the string, it will only hide the overflow part and show the front part. I want to know what's the problem?

I know it's a little bit messed up of a lot code here. But my question is as listed as above. Thanks in advance for any kind suggestion.

Answer 1

For the spacing, you have two problems:

1. Implicit spaces between inline-block elements, and
2. Defining widths for elements with padding.

Regarding username overflow, you have one issue:

3. Default word wrapping behavior is to wrap the whole word to the next line. You need to change that behavior.

Let's take a look at each of them:

---

Implicit Spaces

The problem is that your divs have a display: inline-block; style. Elements displayed as an inline-block have any white-space between them converted to a single space.

See the "Fighting the Space Between Inline Block Elements" article on CSS Tricks for more information on how to overcome this.

One fix, for instance, is to have the li element that is wrapping the divs to have a 0 font-size, and reset a non-zero font size to its children, e.g. in your CSS:

.font-size-0 {
    font-size: 0;
}
.font-size-0 > * {
    font-size: 12px;
}

Any of the links outlined in the link above would work; for example, removing spaces and newlines between your closing tag and opening tag would do the same thing, without forcing you to set and reset the font-size.

---

Widths for elements with padding

In CSS, a width is defined by default for an element to include only its content area (box-sizing: content-box; by default) and not the padding. Set the box-sizing to border-box and you'll be all set.

E.g.

.font-size-0 > div {
    box-sizing: border-size;
}

---

Properly wrapping a single word without spaces

See this StackOverflow answer to see how to address the issue. You will basically need to add this to your .username rule:

.username {
    ...
    word-wrap:break-word;
}

---

Final Result jsFiddle