I’ve codes below:
(Please check out codes below on Google Chrome 8+)
codes 1:
<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML5 document</title>
<div style="background:red; height:300px; width:1500px;">
WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW
<img src="http://www.google.com/images/logos/ps_logo2.png" style="float:left;" width="900" height="230">
</div>
<div style="background:green; color:yellow; font-weight:bolder; height:300px; width:1000px;">
asc aca ascacaaaaaa<img style="vertical-align:top; float:left;" src="http://i3.ytimg.com/vi/F5qniuZG8Rg/default.jpg">Q
</div>
Why the second image displays at the second line after character Q?
I don’t want to change codes 1. I only wanna know the reason why codes 1 displays so strange. I think the second image should display at the left of characters ascacaaaaaa. Just like codes 2 below:
codes 2:
<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML5 document</title>
<div style="background:red; height:300px; width:1500px;">
WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW<br>WWWWWWW
<img src="http://www.google.com/images/logos/ps_logo2.png" style="float:left;" width="900" height="230">
</div>
<div style="background:green; color:yellow; font-weight:bolder; height:300px; width:1000px;">
asc aca ascacaaaaaab<img style="vertical-align:top; float:left;" src="http://i3.ytimg.com/vi/F5qniuZG8Rg/default.jpg">Q
</div>
Thank you!
Wrapping text around an image is easy when using the CSS Float attribute. You have a choice to either float the picture to the left or to the right and the rest is done for you.
in this code u write images to left so it will always stay at left doesn’t matter where is your text.