I have a tricky problem to deal with. Here’s the scenario:
I have an unordered list containing list items. These are displayed vertically, with backgrounds of alternating color, all of which have the same width (bounded by a fixed-width div a few parents up). On some of the items, there is a list item indicator (list-style-type: square; list-style-position: inside;), but on most of the items there is not. Within these list items there are three floated <div>s, all of which contain only text. One needs to align to the left, the other two to the right within the list item. The first and right-aligned <div> needs to have a fixed width, to prevent the contained text from flowing over onto the next line, or extending past the boundaries of the list item. The other two must also have fixed widths, since their content will not change size much at all besides font-specific browser rendering differences.
Here is a simple text example:
--------------------------------------
| • <Some Text> <text2><text3>|
| <Some more text>...<text2><text3>|
| <other text> <text2><text3>|
--------------------------------------
The text in the first item has this CSS: text-overflow: ellipsis; overflow: hidden; white-space: nowrap; to keep the overflow contained nicely. To view the whole content, I have some nice jQuery black magic to make it scroll which I have already tested and proved outside of this context.
My current problem is that in all major browsers, the floating of all the elements causes every list item to have no height, except for the ones with a list indicator (list-style-type). Adding a clearfix div to the end of the list item’s contents causes the content to be displayed at full width a line below the list item indicator:
--------------------------------------
| • |
| <Some Text> <text2><text3> |
--------------------------------------
Everything would be very easy if the first text did not have to have a fixed width set to it (my layout already works like that), but as it is it must.
For your enjoyment, here is a valid HTML example illustrating exactly my problem:
<!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' lang='en' xml:lang='en'>
<head>
<title>HTML List Problem</title>
<style type="text/css">
#container { width: 420px; }
#container ul {
list-style-type: none;
margin: 0;
padding: 0 20px;
background: green;
}
.item { padding: 5px 0 4px 20px; }
.item-current {
list-style-type: square;
list-style-position: inside;
}
.item-even { background: yellow; }
.item-odd { background: orange; }
.text1 {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.text2, .text3 {
float: right;
width: 30px;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li class="item item-current item-even">
<div class="text1 item-current">
Some Text
</div>
<div class="text2">
text2
</div>
<div class="text3">
text3
</div>
</li>
<li class="item item-odd">
<div class="text1">
Some Text
</div>
<div class="text2">
text2
</div>
<div class="text3">
text3
</div>
</li>
<li class="item item-even">
<div class="text1">
Some Text
</div>
<div class="text2">
text2
</div>
<div class="text3">
text3
</div>
</li>
<li class="item item-odd">
<div class="text1">
Some Text
</div>
<div class="text2">
text2
</div>
<div class="text3">
text3
</div>
</li>
</ul>
</div>
</body>
</html>
The solution ended up being to use fixed widths for the sub-elements, and to structure the content slightly differently. Some things which should work just aren’t possible do pull off in HTML that way you’d think of doing it. Working in such a roundabout manner… It’s terrible.