Please view the following HTML/CSS as a webpage. It displays an outline with borders around the various elements. The containing list intentionally allows for horizontal scrolling within a fixed width. The trouble is that when you scroll to the far right of the outline, you can see that the borders (all hot colors) of the inner elements overlap each other. The desired effect is that they are all perfectly flush (on the right side) with the containing element so that no overlap occurs. What's the most simple CSS to accomplish this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Problem</title>
<style type="text/css">
ul {
padding: 0 0 0 20px !important;
margin: 0 !important;
width: 300px !important;
border: solid 1px orange;
height: auto;
overflow: visible;
}
li, span {
padding: 0;
margin: 0;
}
#top {
border: solid 1px black;
}
#top > li {
overflow-x: auto;
overflow-y: hidden;
border: solid 1px yellow;
margin-left: -20px;
}
li {
display: block;
border: solid 1px red;
}
li, ul, span {
width: auto;
white-space: nowrap !important;
}
</style>
</head>
<body>
<ul id='top'>
<li id='trunk'>
<span>This is the trunk</span>
<ul>
<li><span>This is the first line item</span>
<ul>
<li><span>This is the first subitem</span><ul></ul></li>
<li><span>This is the second subitem</span><ul></ul></li>
<li><span>This is the third subitem</span><ul></ul></li>
</ul>
</li>
<li><span>This is the second line item</span><ul></ul></li>
<li><span>This is the third line item</span><ul></ul></li>
</ul>
</li>
</ul>
</body>
</html>
EDIT:
The following image shows a sample outline. Notice that the width is fixed and it can scroll to the right in case the user types a title that is longer than can display in the viewable area. Notice that the highlighted item and it's children are wrapped in light gray. There are some orange markings on the right used for debugging purposes.
http://drop.io/dfhejyj/asset/outline-png
The following image shows that same outline scrolled over to the right. The scrolling is intentional and must not be eliminated. The problem is that when I scroll right the titles protrude outside of the containing UL tag (appearing in light gray). Likewise, with the orange markings. The desired effect is that the orange markings and the gray area would always be flush up agains the right of the select area (delimited by the scroll bar), and that the scrollbar would always remain (so long as any of the titles are long enough to produce it).
http://drop.io/dfhejyj/asset/outline-scrolled-to-right-png
DigruntedGoat's assessment is exactly right. However, I need a corrective approach. This could probably work more easily with the broken box-model used by the old IE browser.