Remove spacing between CSS3 columns
I'm trying to get an effect where it looks like:
C---------------------------------------)
| Address 1 | Phon开发者_运维技巧e 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 © Business Name goes here, 2010; All rights reserved</div>
</footer>
#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;)
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.
精彩评论