이미지링크를 걸기위해서 위젯폼을 만들고 html모드에서

<div id="apDiv1" style="position: absolute; left: 3px; top: 3px; width: 276px; height: 276px; z-index: 1"><a href="http://www.harvesttech.com/" target="_blank"><img src="http://harvest.co.kr/files/attach/images/148/148/027d5b1c62a7ee142b29a05097b67687.jpg" width="276" height="276" /></a></div>
<div id="apDiv2" style="position: absolute; left: 282px; top: 3px; width: 276px; height: 276px; z-index: 2"><a href="http://hyalofast.anikatherapeutics.com/en/" target="_blank"><img src="http://harvest.co.kr/files/attach/images/148/148/886f37012fe85feac7e94df51c5d4873.jpg" width="276" height="276" /></a></div>
<div id="apDiv3" style="position: absolute; left: 561px; top: 3px; width: 276px; height: 276px; z-index: 3"><a href="http://hyalofast.anikatherapeutics.com/en/" target="_blank"><img src="http://harvest.co.kr/files/attach/images/148/148/814afedb0e8822a652b20adb58c53cc4.jpg" width="276" height="276" /></a></div>
<div id="apDiv4" style="position: absolute; left: 3px; top: 282px; width: 276px; height: 276px; z-index: 4"><a href="http://www.sanspa.com/" target="_blank"><img src="http://harvest.co.kr/files/attach/images/148/148/4f71dabbe3ca4579d26544efddd95e33.jpg" width="276" height="276" /></a></div>
<div id="apDiv5" style="position: absolute; left: 282px; top: 282px; width: 276px; height: 276px; z-index: 5"><a href="http://www.cosmomed.de/" target="_blank"><img src="http://harvest.co.kr/files/attach/images/148/148/bb89e8226c80146dab393c070cced306.jpg" width="276" height="276" /></a></div>
<div id="apDiv6" style="position: absolute; left: 561px; top: 282px; width: 276px; height: 276px; z-index: 6"><a href="http://www.suntronic.eu/" target="_blank"><img src="http://harvest.co.kr/files/attach/images/148/148/52e990533667dd3881114640287dcf3e.jpg" width="276" height="276" /></a></div>

라고 한뒤 저장을 하니 아래처럼 위로 올라가 버리네요 ㅠㅠ 내용안에 배치하려면 어떻게 수정을 해야할까요?