Trying to have a list of users in three vertical columns

I am trying to make a structure like I have in my image below. User list with 3 items in each column.

But I don't get it.

I have my example with what I have: http://jsfiddle.net/81j72gx1/2/

Can you help me understand what is wrong in my code?

This is my html:

<div id="wrapper">
    <div id="header">
        <div id="left">
            <h1>Services</h1>
        </div>
        <div id="right">
            <span>User:</span>
            <span>John</span>
            <a href="#">(close)</a>  
        </div>
    </div>
    <div id="menu">
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
            <li><a href="#">Link 6</a></li>
        </ul>
    </div>
    <div id="content">
        <h2>User</h2>
        <form>
            Order by:<select>
                <option value="Test" name="test">test</option>
                <option value="Test" name="test">test</option>
                <option value="Test" name="test">test</option>
            </select>
            All: <select>
                <option value="Test" name="test">test</option>
                <option value="Test" name="test">test</option>
                <option value="Test" name="test">test</option>
            </select>
             Status:<select>
                <option value="Test" name="test">test</option>
                <option value="Test" name="test">test</option>
            </select>
            <input type="submit" Value="Update"/>
        </form>
        <div id="lists_container">
            <div class="list1">
                <ul>
                    <li><img src="http://placehold.it/50x80"/></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 3</a></li>
                </ul>
            </div>
            <div class="list2">
                <ul>
                    <li><img src="http://placehold.it/50x80"/></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 3</a></li>
                </ul>
            </div>
            <div class="list3">
                <ul>
                    <li><img src="http://placehold.it/50x80"/></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 3</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

      

        
        
        
      

    

And my css:

*{margin:0;padding:0;}
#wrapper{
width:900px; margin:0 auto;
}
#header{
width:100%; float:left;
}
#header #left {
float:left;
}
#header #right {
float:right;
}
#header #right a{
color:#000;
}
#menu{
width:100%; float:left; height:50px; background:#ccc;
}
#menu ul{
list-style:none;
}
#menu ul li {
float:left;line-height:50px;
}
#menu ul li a{
text-decoration:none; color:#000; display:block; margin-right:20px;
}
#menu ul li a:hover{
color:#fff; background:#000;
}
#content {
float:left; width:100%; margin-top:20px;
}
#lists_container{
float:left;width:100%;
}

.list1 ul li img{
float:left; margin-right:10px;
}

.list1 ul li{
 list-style:none;
 }
.list2{
 float:left;
 }
.list2 ul li img{
 float:left; margin-right:10px;
 }
.list2 ul li{
 list-style:none;
 }
.list2 ul{
 list-style:none;
 }
.list3 ul{
 list-style:none;
 }