Forum Moderators: not2easy
<li>Hot Dogs<span class="price">$2.50</span></li>
CSS for li and span
.price {width:100px; text-align:right;}/*set width to what fits for you*/
li {width:400px}/*set width to what fits for you*/
Just remember to make the width of the li longer than the length of your longest list item and add that extra amount for the .price width. You really don't even have to add any width to the .price class if you don't want.
This way you will have your list perfectly aligned left while all your prices are perfectly aligned on the right.
Hope that makes sense.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>test</title>
<style type="text/css">
.item ul {
margin: 10px;
padding: 0;
list-style-type: none;
}
.item ul li
{
width: 500px;
padding-top: 5px;
padding-bottom: 5px;
}
.price {width:100px; text-align:right;}
</style>
</head>
<body>
<div class="item">
<ul>
<li>line Item 1<span class="price">Price 1</span></li>
<li>line Item 2<span class="price">Price 2</span></li>
</ul>
</div>
</body>
</html>
<dl><dt>Item name</dt> <dd>Price</dd><dt>Item name</dt> <dd>Price</dd>float the <dt> and <dd> to the left, give them a width, and do text-align:right on the <dd>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>test</title>
<style type="text/css">
.item dl {
width: 200px;
margin: 10px;
list-style-type: none;
}
.item dl dt
{
float:left;
width: 150px;
}
.item dl dd
{
text-align:right;
}
</style>
</head>
<body>
<div class="item">
<dl>
<dt>line Item 1</dt><dd>Price 1</dd>
<dt>Another line item</dt><dd>Price 2</dd>
</dl>
</div>
</body>
</html>
Umm, I've done this but it doesn't seem to align right. It just sits next to each other:
That's because <span> is an inline element, but width [w3.org] "...specifies the content width of boxes generated by block-level and replaced elements." In other words, inline elements such as <span> are unaffected by width declarations unless they are transformed into block level elements by setting their display property to "block" (or by floating them).
-- b
[edited by: swa66 at 2:08 pm (utc) on June 5, 2009]
[edit reason] editing out personal remark [/edit]
I use my method all the time.. I have no issues with it.
[edited by: swa66 at 2:08 pm (utc) on June 5, 2009]
[edit reason] editing out personal reply [/edit]
John from Boston
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>menu</title>
<style type="text/css">
<!--
body {position: absolute; margin: 0; padding: 0;}
p {
font: bold 14px arial, sans-serif;border:1px solid red;
}
</style>
</head>
<body>
<p>Menu Item 1 ……………………… <span style="float:right;">$6.76</span><br>
Menu Item 1 ………………………… <span style="float:right;">$5.55</span><br>
</p>
</body>
</html>
To workaround this issue, I suggest that you wrap another span around the text preceding the current floated span, and float it left, and add 'clear:left'. Remember you must clear the floated children; you can do this by adding 'overflow:hidden' to the P element. I seem to vaguely remember that IE6 has a problem with clearing like this, so you may need to check this.
<p><span style="float:left;">Menu Item 1 ……………………… <span style="float:right;">$6.76</span></span><br>
<p><span style="float:left;">Menu Item 2 ……………………… <span style="float:right;">$7.76</span></span><br>
</p>
<p><span style="float:left;clear:left;">Menu Item 1 ………………………</span> <span style="float:right;">$6.76</span>
<span style="float:left;clear:left;">Menu Item 2 ………………………</span> <span style="float:right;">$7.76</span>
</p> Having said that, you could argue that the format that you have laid your elements out in, looks rather like an unordered list, so I would be tempted to go with something like:-
-----------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>menu</title>
<style type="text/css">
<!--
body {margin: 0; padding: 0;}
ul{
border:1px solid red;
padding:0;
float:left /* Emulate the shrink-to-fit behaviour that you achieved by applying 'position:absolute' to BODY */
}
li {
font: bold 14px arial,
sans-serif;
overflow:hidden;
list-style:none;
}
</style>
</head>
<body>
<ul>
<li><span style="float:left;clear:left;">Menu Item 1 ………………………</span> <span
style="float:right;">$6.76</span></li>
<li><span style="float:left;clear:left;">Menu Item 2 ………………………</span> <span
style="float:right;">$7.76</span></li>
</ul>
</body>
</html>
--------------------------------
Note how I removed 'position:absolute' from the BODY, as this is a very bad idea to leave in.
