<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <style> body { direction: rtl; } .float { width:200px; height:200px; background-color:red; float:right; } .container { height:200px; } .pct { width:50%; } table { border:2px solid green; } img { display: block; height:50px; background-color: green } .overflow { border:2px solid blue; overflow:scroll } </style> </head> <body> <div class="container"> <div class="float"></div> <table> <tr><td>This is a table. It should sit on the same line as the float and wrap as needed to fit within the remaining line width. </table> </div> <div class="container"> <div class="float"></div> <div class="overflow"> This is an overflow:scroll region. It should sit on the same line as the float and wrap as needed to fit within the remaining line width. </div> </div> <div class="container"> <div class="float"></div> <hr> </div> <div class="container"> <div class="float"></div> <table class="pct"> <tr><td>This is a table. It should sit on the same line as the float and wrap as needed to fit within the remaining line width. </table> </div> <div class="container"> <div class="float"></div> <div class="overflow pct"> This is an overflow:scroll region. It should sit on the same line as the float and wrap as needed to fit within the remaining line width. </div> </div> <div class="container"> <div class="float"></div> <hr class="pct" align=right> </div> <div class="container"> <div class="float"></div> <img class="pct"> </div> </div>