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 pro

Solution 1:

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.

Solution 2:

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.

Solution 3:

Try this:

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

Solution 4:

Another method is with position:absolute

Demo

#contactInfop
{
    position:relative;
}

#contactInfospan,#contactInfoa
{
    position:absolute;
    right:0px;
}

Edit (cleaned up version)