I have come to realize that numbers cannot be used in CSS selectors.
<!DOCTYPE html>
<html>
<style type="text/css">
div{width:350px;word-wrap:break-all; }
#1{float:left;}
</style>
<div class="up">
<p><img id="1" src="http://i.imgur.com/Vt9ni32.jpg?1" /> Web graphics are visual representations used on a Web site to enhance or enable the representation of an idea or feeling, in order to reach the Web site user. Graphics may entertain, educate, or
emotionally impact the user, and are crucial to strength of branding, clarity of illustration, and ease of use for interfaces. Examples of graphics include maps, photographs, designs and patterns, family trees, diagrams, architectural or engineering
blueprints, bar charts and pie charts, typography, schematics, line art, flowcharts, and many other image forms.
</p>
</div>
</html>When using numbers in CSS selectors, the text does not align properly, and a gap remains. Changing id=1 to id=2 or any other number, and changing #1{float:left;} to #2{float:left;}, does not eliminate the gap.
If I change the numbers to words, the gap disappears as shown below.
<!DOCTYPE html>
<html>
<style type="text/css">
div{width:350px;word-wrap:break-all; }
#test{float:left;}
</style>
<div class="up">
<p><img id="test" src="http://i.imgur.com/Vt9ni32.jpg?1" /> Web graphics are visual representations used on a Web site to enhance or enable the representation of an idea or feeling, in order to reach the Web site user. Graphics may entertain, educate,
or emotionally impact the user, and are crucial to strength of branding, clarity of illustration, and ease of use for interfaces. Examples of graphics include maps, photographs, designs and patterns, family trees, diagrams, architectural or engineering
blueprints, bar charts and pie charts, typography, schematics, line art, flowcharts, and many other image forms.
</p>
</div>
</html>