html - How do I get a CSS float to overlap a table? -

how floated element overlap table? overlaps other divs fine, table seems force clear.

in example, div overlapped (what want) table below clears past floated element (which don't.)

example here: http://cssdesk.com/9rzvs. (ie seems fry i'll paste here too.)

html:

<div>   <span style="float:right;width:40%;">     content content content content content     content content content content content     content content content content content   </span>   content content content content... </div>  <div> content content content content content  content content content... </div>  <table ><tr><td>1</td></tr></table> 

css:

table {  width:300px;  border: 1px solid black; } span {  border:2px solid black;  background-color: #ddd;  margin: 2px solid gray; } div {  border:2px solid black;  background-color: #fff;  margin: 2px solid gray;  width: 200px;  padding: 10px; } 

you can functionality going this:

<div style="position:relative">   <span style="position:absolute;right:0;width:40%;">     content content content content content     content content content content content     content content content content content   </span>   content content content content... </div> 

see here. appears table display clears float (from tests ran). recommend using above solution achieve result - instead of using floats.