views:

42

answers:

2

I'm trying to get an effect where it looks like:

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

But the spacing with the following makes it

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

What can I do to fix this? Below is the relevant CSS and 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>
A: 
#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;)
Lynne
That centers both columns, and the line is next to both of them, but it needs to be left-aligned.
Havvy
A: 

Why don't you just use some right-padding on the wrapper?
You will need to set a width (2x width column + padding = total desired width).
Remember that you can also change the box model using box-sizing if you are targeting css3 ready browsers.

Knu