Maybe this is a better example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.fl{width:30%;float:left}
.fr{float:right}
</style>
</head>
<body>
<div itemscope itemtype="http://schema.org/Product">
<img class="fr" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg" width="500" height="334">
<ul class="fl">
<li><h1>Xy 1234 56</h1></li>
<li><h1>Ab 123456 12 34</h1></li>
<li><h1>12345 123 1234 12 345</h1></li>
<li><h1>123456 123 12345 6789</h1></li>
</ul>
<br><br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p><br><br>
</div></div></body></html>
As you widen the browser you can see the text coming up between the UL on the left and the inage on the right.
As you narrow the browser, the text will first move below the UL and image (where it should be) and as you continue to narrow the browser the text will actually appear before the UL and start pushing the UL down, which makes the web page look possessed.
How do I block/wall off the UL and image to stop the text from coming up through the UL and image? I tried putting a div and /div above and below the UL and image but it had no effect.Thanks - Chris