Css Tricks - How to align 4 div's

Question

I have 4 divs in my HTML, I'd love to stay the same this appearance: (Each color a div, totaling 4 (not counting the background color))

For the current scenario:

I have the following jsFiddle: HERE

My big problem is when I add another item <li> in my <ul>, the result is that I have the following:

Css with the way they are one overlaps the other :'( (crying)

  body {
    background-image:url('http://subtlepatterns.com/patterns/shattered.png');
    margin:0;
}
.chatBody {
    position:absolute;
    bottom:0;
    height:200px;
    width:100%;
    background-color:#3c454f;
    border-top: 10px solid #7ac943;
}
#navlist li {
    display: inline;
    list-style-type: none;
    width:300px;
}
.avatarUser {
    height:80px;
    width:80px;
    background-color:yellow;
    float:left;
    margin-right:20px;
    margin-bottom:20px;
}
li > .frdImage {
    position: relative;
    /*margin-top:-25px;*/
    top:50%;
    float:left;
    margin-left:5px;
    border-radius: 6px;
    border: solid 2px #aaa;
    height:80px;
    width:80px;
    background-color:yellow;
    margin-right:10px;
    margin-bottom:20px;
}
li > span.frdName {
    position:absolute;
    float:left;
    margin-top:10px;
    font-weight: bold;
    font-family:'Verdana', cursive;
    font-size: 15px;
    color: white;
    margin-right:200px;
}
.active{
    width:300px;
}
.frdStatusIndicator{
    float:left;
    margin-top:40px;
    height:15px;
    width:15px;
    background-color: #7ac943;
    border-radius: 10px;
}
.frdStatusName{
    float:left;
    margin-top:40px;
    border-radius: 10px;
    font-family:'Verdana', cursive;
    font-size: 15px;
    color: white;
    line-height:15px;
    padding-left:5px;
}

Could someone kindly help me with this? Since already very grateful for the time you guys!

Answer 1

How about this for html

<div class="chatBody">
    <div id="navlist">
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes</div>
                <div class="frdStatusIndicator online"></div>
                <div class="frdStatusName">Online</div>
            </div>
        </div>
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes the second</div>
                <div class="frdStatusIndicator idle"></div>
                <div class="frdStatusName">Idle</div>
            </div>
        </div>
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes the third</div>
                <div class="frdStatusIndicator online"></div>
                <div class="frdStatusName">Online</div>
            </div>
        </div>
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes the fourth</div>
                <div class="frdStatusIndicator offline"></div>
                <div class="frdStatusName">Offline</div>
            </div>
        </div>
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes the fifth</div>
                <div class="frdStatusIndicator idle"></div>
                <div class="frdStatusName">Idle</div>
            </div>
        </div>
    </div>
</div>

and this for css:

  body {
    background-color: #3c454f;
  }
  #navlist > div.tile {
      display: inline-block;
      width:300px;
      border: solid 1px red;
      position: relative;
  }
  .avatarUser {
      height:80px;
      width:80px;
      background-color:yellow;
      float:left;
      margin-right:20px;
      margin-bottom:20px;
  }
  div.tile > .frdImage {
      border-radius: 6px;
      border: solid 2px #aaa;
      height:80px;
      width:80px;
      background-color:yellow;
      display: inline-block;
  }
  div.tile > div.stuff > div.frdName {
      position:relative;
      display: inline-block;
      right: 0px;
      margin-top:10px;
      font-weight: bold;
      font-family:'Verdana', cursive;
      font-size: 15px;
      color: white;
      width: 200px;
  }
  .active{
      width:300px;
  }
  div.tile > div.stuff {
      position: relative;
      top: -2em;
      width: 208px;
      /* border: solid 1px green; */
      display: inline-block;
  }
  .frdStatusIndicator{
      position: relative;
      height:15px;
      width:15px;
      background-color: #7ac943;
      border-radius: 10px;
      display: inline-block;
  }
  .frdStatusName{
      position: relative;
      border-radius: 10px;
      font-family:'Verdana', cursive;
      font-size: 15px;
      color: white;
      line-height:15px;
      padding-left:5px;
      display: inline-block;
  }
  .offline {
      background-color: #FF0000;
  }
  .online {
      background-color: #00FF00;
  }
  .idle {
      background-color:  #FFFF00;
  }

I suppose I have to do a jsfiddle for this ... http://jsfiddle.net/bbutler/TMgs5/1/

Answer 2

Try setting width to this div in the list i.e for eg:100px and try it wont overlap

 <div style="display:inline; float:left;width:100px">

Thanks AB

Answer 3

Just make your window bigger in JSFiddle.

Just check out the jsfiddle below. You were pretty much on the right track.

http://jsfiddle.net/TYZ64/4/

#navitem li
{
    display:inline-block;
}

I just changed that part.