<!DOCTYPE HTML> <html> <head> <style> div { border:1px solid green; margin:5px; } div { overflow:auto; } </style> </head> <body> <div><span style="float:left">1<img src="square-outline-32x32.png">"Before beforeleft afterleft</span >Inner<span style="float:left">2<img src="square-outline-32x32.png">After beforeleft afterleft"</span ></div> <div><span style="float:left">1<img src="square-outline-32x32.png">"Before beforeleft afterright</span >Inner<span style="float:right">2<img src="square-outline-32x32.png">After beforeleft afterright"</span ></div> <div><span style="float:right">1<img src="square-outline-32x32.png">"Before beforeright afterleft</span >Inner<span style="float:left">2<img src="square-outline-32x32.png">After beforeright afterleft"</span ></div> <div><span style="float:right">1<img src="square-outline-32x32.png">"Before beforeright afterright</span >Inner<span style="float:right">2<img src="square-outline-32x32.png">After beforeright afterright"</span ></div> </body> </html>