What have I done wrong with these unordered lists?

Question

I'm trying to get 2 unordered lists working in a div to achieve two different sized columns, but for some reason there is this extra top/bottom padding within the div that I don't want there.

#contact-box {
    float: right;
    border-top: 1px solid #ccc;
    background-color: green;
    width: 250px;
    padding: 0px;
}

        ul#networks {
            list-style-type: none;
            float: left;
            width: ;
            padding: 0px;
        }
            #networks li {
            border-bottom: 1px solid #ccc;
            padding: 7px;

            }

        ul#contacts {
            list-style-type: none;
            float: right;
            width: 70%;
            background-color: red;
            padding: 0px;           

        }
            #contacts li {
            border-bottom: 1px solid #ccc;
            padding: 7px;
            }

You can see it here: http://jsfiddle.net/XwfLD/ I know it's going to be something simple in the CSS, but if anybody could help it would be appreciated!

Answer 1

Add these lines:

ul{
    margin: 0;
    padding: 0;
}

Fiddle

Answer 2

I believe that your issue is you don't have a width specified for ul#networks.. if you change

ul#networks {
list-style-type: none;
    float: left;
    width: ;
    padding: 0px;
}

To..

ul#networks {
list-style-type: none;
    float: left;
    width: 30% ;
    padding: 0px;
}

They should move beside each other. From your description I believe that is what you want. Let me know how that works.