This is one of those occasions when it wouldn’t hurt to use a table.
Sure, you could solve the problem by wrapping the description in an extra <span> tag and using display:inline-block; or using a <dl> for the list instead, but unfortunately both of those have problems on legacy browsers (IE6/7) and I don’t know what support is like for them on mobiles. It might be a good intellectual exercise to code it up avoiding tables, but actually what you’ve got are two related columns linked by rows of data, so a table is absolutely fine, maybe even the most semantically appropriate element set to use.
In addition to what S D said, note that the data is vaguely tabular. [Desc.][Price], you are even using NEARLY the same number of tags. UL= TABLE, LI =ROW, (annon.) =TD, SPAN=TD.
A DL list would kinda work too… it would be odd that a desc would define a cost… but hey!
This WOULD have been a list if the price was involved. It’s funny it used to be that people would use tables for anything, now they avoided them even when the data is tabular.
I blame the coding nerds.When they opted to say:“dont use tables for…” rather than “use tables ONLY WHEN…”
Just make sure the float is the first element on the line and then the text will wrap and not the float.
<li class="description2">[B]<span class="priceright">49.00</span>[/B]Introductory 50 Min Swedish/Therapeutic *</li>
Inline-block on inline elements is fine in IE6/7. It’s only when used on block elements that you need to add a simple hack to get it working. Support for inline-block will be just as good as any other normal property as far as mobiles are concerned. It was only ever IE and old Firefox (ff2-) that had problems with it.
I think an argument can be made for tables or a list with the above structure so I think either will be fine although for mobiles you may want the flexibility of css and allow the element to go as small as possible.
Using inline-block we can get vertical alignment quite nicely.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.box {
border: 1px solid #edd6a6;
border-radius: 10px;
background: #fff;
margin: 10px 10px;
padding: 5px 10px;
}
.nav {
list-style: none;
padding: 0;
margin:0;
}
.nav li {
border-bottom: 1px solid #edd6a6;
color: #000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
background-size: 32px 32px;
padding: 15px 10px 15px 10px;
white-space:nowrap;
zoom:1.0;
word-wrap:break-word;
}
.nav li span {
color: #000;
font-size: 14px;
text-decoration: none;
font-weight: normal;
}
.nav li span, .nav li b{
display:inline-block;
vertical-align:middle;
}
.nav li b{
width:86%;
white-space:normal;
padding:0 1% 0 0;
}
* html .nav li b{width:84%}
.nav li span{width:12%;text-align:right}
</style>
</head>
<body>
<ul class="box nav">
<li><b>Introductory 50 Min Swedish/Therapeutic with some longer text to wrap around with some longer text to wrap around *</b><span>49.00</span></li>
<li><b>50 Min Swedish/Therapeutic</b><span>88.00</span></li>
<li><b>80 Min Swedish/Therapeutic</b><span>132.00</span></li>
<li><b>110 Min Swedish/Therapeutic</b><span>176.00</span></li>
<li class="last"><b>Add Aromatherapy to any Massage</b><span>10.00</span></li>
</ul>
</body>
</html>
A much simpler way is to add a height attribute to the .nav li and add another class to handle the description to float left and give it a width restraint.
.nav li {
display: block;
border-bottom: 1px solid #edd6a6;
height:40px;
}
.descleft{
float:left;
width:80%;
text-decoration: none;
font-weight: normal;
}
<ul class="box nav">
<li class="description2"><span class="descleft">Introductory 50 Min Swedish/Therapeutic *</span><span class="priceright">49.00</span></li>
<li class="description2"><span class="descleft">50 Min Swedish/Therapeutic</span><span class="priceright">88.00</span></li>
<li class="description2"><span class="descleft">80 Min Swedish/Therapeutic</span><span class="priceright">132.00</span></li>
<li class="description2"><span class="descleft">110 Min Swedish/Therapeutic</span><span class="priceright">176.00</span></li>
<li class="description2 last"><span class="descleft">Add Aromatherapy to any Massage</span><span class="priceright">10.00</span></li>
</ul>
<div style="clear:both;"></div>
the difference is in the .nav li > I added height:40px;
and created a new class called .descleft
Also don’t forget to add the style clear both as shown above
Good try and thanks for your input but that will fail for a number of important reasons I’m afraid.:). Without wishing to pick holes deliberately I think I should point out some of the pitfalls of doing what you mention.
First of all you should never give a height to elements that hold fluid content such as text because that is the biggest design flaw that I see these days. If the text wraps to two or three lines or the user resizes the text from the browsers controls then all the text will spill out and overlap. Especially because this is a fluid layout and at small screen sizes that text will wrap to 3,4,5 or more lines and exceed the 40px height very quickly.
If for some reason you do have to add a height then it should at least be in ems so that text can be resized without breaking. However 99% of the time you don;t want a height as the content should dictate the height.
You should have removed the height and instead cleared the float at the list level (overflow:hidden and haslayout on the list item will do that).
The simplest solution was to move the span to the front of the line as I mentioned above and avoid all those clearing issues although it does change the source html which is the drawback.
The other drawback to floating is that you lose that nice vertical alignment that inline-block provides although its only a minor cosmetic concern.
Lastly avoid empty clearers also as there is seldom a need for those as there are other much better clearing techniques and indeed in the situation you have in your example the element following the ul could have been cleared itself anyway. However that wouldn’t be necessary of you had already contained the floats as I mentioned earlier.
Support for inline-block will be just as good as any other normal property as far as mobiles are concerned. It was only ever IE and old Firefox (ff2-) that had problems with it.