Css Tricks - How to align 4 div's - css

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.