Удалить интервал между столбцами CSS3

Question

Я пытаюсь получить эффект, который выглядит следующим образом:

C---------------------------------------)
| Address 1 | Phone Numbers             |
| Address 2 | Times place is open       |
(---------------------------------------)

Но интервал, следующий за этим, делает его

(-------------------------------------------)
| Address 1           | Phone Numbers       |
| Address 2           | Times place is open |
(-------------------------------------------)

Что я могу сделать, чтобы это исправить?Ниже приведены соответствующие CSS и HTML.

<footer> 
  <style>
    footer {
      margin-left: 224px;
      margin-top: 1em;
      margin-bottom: 1em;
      clear: both;
      font-size: 0.66em;
    }

    #contactInfo{
      background: #FDF9D3;
      border: 1px solid black;
      -moz-border-radius: 5px;
      border-radius: 5px;

      -moz-column-count: 2;
      -moz-column-rule: 1px solid black;
    }
  </style>
  <div id="contactInfo">
    <span class="address">Address 1</span><br>
    <span class="address">Address 2</span><br>
    <span class="phone">Office: ###-###-####, Fax: ###-###-####</span><br>
    <span id="hours">Open Monday through Friday from 9:00am to 5:30pm</span>
  </div>
  <div id="copyright">Copyright &copy; Business Name goes here, 2010; All rights reserved</div>
</footer>

Answer 1

Почему бы вам просто не использовать правый отступ на обертке?
Вам нужно будет установить ширину (столбец ширины 2x + отступ = общая требуемая ширина).
Помните, что вы также можете изменитьблочная модель с использованием размеров блока, если вы ориентируетесь на готовые браузеры css3.

Answer 2

#contactInfo{
  background: #FDF9D3;
  border: 1px solid black;
  -moz-border-radius: 5px;
  border-radius: 5px;

  -moz-column-count: 2;
  -moz-column-rule: 1px solid black;
  -moz-column-width: 200px;
  -moz-column-gap: 20px;
}
span.address{ float:right;)