expanding Dots pushing link or text down

I created 开发者_运维知识库a spanned line with dots to fill in between text of links and phone number, but i cant get it so that if i have to many dots that the text does not go underneath. The problem is on some different brwosers and computers the .... will look fine or it will push it out of the way. How wouldi go about making it so the dots.... would span and the text would not go below the width its supposed to.

<style type="text/css">
#contactInfo {
    margin:auto;
    width: 480px;
    height: auto;
}
</style>
<div id="contactInfo">
  <p>Email: .........................................................................<a    href="mailto:info@hereistheemail.com" class="redBold">info@hereistheemail.com</a></p>
  <p>Phone: ..................................................................................<span    class="redBold">888-888-8888</span></p>
</div>

I tried putting less dots buton some browsers it just doesnt look right.

A better way to do what you want is with a definition list. This will semantically present the information you want and not require you to type out a bunch of dots:

HTML

<dl>
    <dt>Phone</dt>
    <dd>123-4567</dd>

    <dt>Email</dt>
    <dd>info@email.com</dd>    
</dl>

CSS

dl {
   /* Adjust as needed.  Note that dl width + dt width must not be greater */
   width: 300px;  
}

dt {
   /* The definition term with a dotted background image */
   float: left;
   clear: right;
   width: 100px;  
   background: url(1-pixel-dot.gif) repeat-x bottom left;  
}

dd {
   /* The definition description */
   float: right;
   width: 200px;  
}

You can see an example of it here.

You will have to try and create a workaround for this, instead of just using characters.

Some solutions could be using a background image that repeats itself inside some div/span: http://www.htmlforums.com/html-xhtml/t-toc-style-dotted-line-tab-fill-in-html-103639.html

Or you could think of creating a span between the word e-mail and the e-mail address and try to create a border-bottom: dotted 1px black or something equivalent. Or maybe put the information in a table and create one td with that border-bottom.

Another solution would be to check the number of dots needed with some javascript, but this is most certain not robust at all and will not justify-align your content.

So, be creative with a solution. Filling the line with characters is probably not the way to go.

Try this:

#contactInfo {
  [ your other styles ]
  white-space: nowrap;
}

Another method is with position:absolute

Demo

#contactInfo p
{
    position:relative;
}

#contactInfo span,#contactInfo a
{
    position:absolute;
    right:0px;
}

Edit (cleaned up version)