How to position an element at the TOP LEFT corner of a page using CSS?

Question

I need to place div id="wrapper" on the TOP LEFT corner of the page (top and left = 0), like the id="test" div. Could you point me out what is wrong with my code?

For your vision: http://jsfiddle.net/Q9fzX/

<div id="wrapper">
    <div class="content">
        <ul>
            <li class="focus">0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
            <li>29</li>
            <li>30</li>
            <li>31</li>
            <li>32</li>
            <li>33</li>
            <li>34</li>
            <li>35</li>
            <li>36</li>
            <li>37</li>
            <li>38</li>
            <li>39</li>
        </ul>
    </div>
</div>
<div id="navigator">
    <div id="up" class="btn">UP</div>
    <div id="down" class="btn">DOWN</div>
    <div id="left" class="btn">LEFT</div>
    <div id="right" class="btn">RIGHT</div>
    <div id="pageinfo" class="pageinfo">Page 1 of tot 4</div>
</div>
<div id="test"></div>

And the css :

#test {
    position: fixed;
    top: 0px !important;
    left: 0px !important;
    width: 200px;
    height: 200px;
    background-color: blue;
    opacity: 0.2;
}
body {
    margin: 0;
    padding: 0;
}
#wrapper {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 600px;
}
#navigator {
    position: absolute;
    left: 600px;
}
ul {
    list-style: none;
}
li:nth-child(even) {
    background: #d80000;
}
li {
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
    margin: 0px;
}
.focus {
    background-color: yellow !important;
}
.btn {
    float: left;
    width: 50px;
    height: 50px;
    border: 2px gray solid;
    margin: 10px;
}

Answer 1

Just use this css, because your ul element takes default margin and padding.

ul {
            list-style: none;
            margin:0px;
            padding:0px;
        }

This is working here

Answer 2

Your CSS actually already was correct, but each browser has default styling which includes default margin and padding. This is what was causing your elements to be positioned strangely.

Adding the following "reset" CSS at the top fixed it:

*{
    margin: 0;
    padding: 0;
}

Fiddle