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
Solved

Character width with CSS

Posted on 2006-06-25
2
1,988 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
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 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