How to force a floating div to move below a (non-floating) table instead of resizing when there's no space?

I have the following lay开发者_运维百科out:

<div style="float:right ...">Contents</div>
<table>contents</table>

I want that the div would move below the table when there's no space to display both elements side-by side. How can I do that? Currently they overlap.

EDIT:

This is a template so I want to avoid coding any widths into the layout. The div and the table should resize based on their contents and then decide how they can be placed, side-by-side or table above the div. Basically I am searching for something like min-width: <content width request>

If I am understanding your question, you want to use the max-width css property as seen in this jsFiddle.

Both <div> and <table> elements have flexible widths by default, but you can work around it with multiple ways.

Basically, in order for them to eventually be "too wide" for their container, you have to give them a specified min-width, so something like...

div { min-width: 300px; }
table { min-width: 500px; } /* or whatever numbers make the most sense */

would have them next to each other in any container 800px or wider (500px + 300px), but stack them if it's any narrower (because together they're too wide to fit side-by-side).

The float: right; looks right. It wouldn't hurt to add it to both the <div> and <table> to ensure the behavior you're looking for, though.

You probably have to look at CSS Positioning using a relative approach. Maybe this link will help you out.

Using display:inline; for the table solved the problem. It looks like it's a top priority for floating elements to overlap with block type contents, which can not be killed easily.