Solved

Character width with CSS

Posted on 2006-06-25
2
1,989 Views
Last Modified: 2013-12-03
How can I format the following text block so that the amounts line up vertically?

<div id="textblock">
Extra Adult........................£40<br>
Extra Child (11-16).............£20<br>
Extra Child (2-10)...............£10<br>
</div>

It appears that the '.' character is a different width to the numeric '1' .

Thanks
0
Comment
Question by:chrisfixit
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16978217
your data is tabular data, so you should use a <table>.
then you can use a background image to show the dots.
0
 
LVL 4

Accepted Solution

by:
noamattd earned 500 total points
ID: 16984022
Use a monospace font like Courier new, where each character is the same width.  The easier(and probably better) way is to place the information in a table, eliminate the need for the dots altogether.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question