<div style="width:120px; height:120px"> 때문입니다.
<div> 태그에 출력되는 박스의 크기를 120x120 픽셀 크기로 제한해 버리기 이미지의 실제 크기와 관계 없이
높이 120픽셀 밑에는 <p>He was ...의 텍스트 박스가 출력되는 겁니다.
이미지의 크기가 120x120 박스보다 작으면 문제가 없는데, 이보다 큰 이미지를 <div> 영역안에 넣으려면
좋은 방법은 아니지만 overflow 스타일을 사용해야 합니다.(책의 5장에 overflow 속성을 보세요
예를 들어
<div style="width:120px; height:120px;overflow:hidden">으로하면 이미지가 잘려 보이고요,
<div style="width:120px; height:120px;overflow:scroll">로하면 120x120 박스에 스크롤이 만들어져서 텍스트가 겹치지 않아요.
그런데, overflow를 사용하지 않으면 디폴트가 overflow:visible이어서 <div> 박스 크기에 상관없이 이미지가 출력됩니다.
그래서 이미지와 텍스트가 겹쳐 나오게 됩니다.
이미지의 크기와 상관없이 이미지와 텍스트가 겹치지 않게 하려면
<div> 태그에 스타일을 지우고 다음과 같이 원래 책에 있는 대로 해야 합니다.
<div><img id=...

 그리고 현재 HTML 태그의 앞부분에 <style> 태그 내에

font-size:"15" 등과 같은 표현은 틀린 겁니다.

font-size:15px과 같이 반드시 단위를 써주어야 합니다. 그리고 ""도 없애야 합니다. 정교하게 코딩하세요.

또한 <h3 ...";>에서 끝의 ;도 없애고 <h3 ..."hide()>와 같이 해야 합니다.

이곳 저곳 더 살펴보세요.