Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Character width with CSS

Posted on 2006-06-25
2
Medium Priority
?
1,996 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 2000 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

721 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