Что я сделал с этими неупорядоченными списками?

Question

Я пытаюсь получить 2 неупорядоченных списка, работающих в div, чтобы достичь двух разных столбцов, но по какой-то причине в этом div есть лишняя верхняя/нижняя прокладка, которую я не хочу там.

#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; 
      } 

Вы можете увидеть здесь: http://jsfiddle.net/XwfLD/ Я знаю, что это будет что-то простое в CSS, но если кто-то может помочь было бы оценено!

Answer 1

Добавьте эти строки:

ul{ 
    margin: 0; 
    padding: 0; 
} 

Fiddle

Answer 2

Я считаю, что ваш вопрос не имеет ширину, указанную для сетей # ул .. если изменить

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

К ..

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

Они должны двигаться рядом друг с другом. Из вашего описания я считаю, что это то, что вы хотите. Дайте мне знать, как это работает.