A problem with float and clear

This div is float: left.

• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item
• Menu item

This div is margin-left: 140px.

Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content.

This p is clear: left, and that's the problem. I'd like it to be just under the float:left div above it, but there's no way to do that if the page columns are floated divs; you have to use display: table-cell like this. If the left menu div is floated, then the clear: left on this p element will move it down below the bottom of that div, even though it's outside this p's container.

Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content. Here's quite a lot of content.