In the screen shot you see a list of items on the left (not floated) and a display box on the right (floated). How can I prevent the left item's li element from cutting into the display box. The li content follows the flow and breaks to a new line before running into the display box, but the li element, as in the container, does not.
Li items on the left:
border: 1px solid #000000;
display: block;
margin-bottom: 8px;
padding: 10px;
Display box on the right:
border: 3px double #000000;
display: inline-block;
float: right;
margin-left: 20px;
padding: 15px;
width: auto;
Thanks, Ryan
AFTER ROBERT'S SUGGESTION:
RESPONSE TO TIM B
The widths are dynamic on different pages, dynamic as in different per page, but they won't change on a per page basis, except for the li elements that go beyond the display box. Just like when you float a pictures to the left and the text sits on the right of the pictures, but once the pictures ends, the text continues underneath the image all the way to the right edge of the page, that's what I want in reverse. So I want the li element to go to the left edge of the right display box, but past the box, I want to go to the edge of the page. The text itself conforms to this, but for some reason, the li element does not recognize there to be an "object" to prevent it from stopping and cutting into the display box. The reason it doesn't recognize it is because of the right floated display box, which breaks things from the normal flow, but I would think there has to be a way to either manipulate the display box to it can be recognized or manipulate the li elements so they can recognize the display box.