html - The text goes over the image and not under it -

html - The text goes over the image and not under it -

the problem when added image html page,and tried write go on working,the text going on image.i want text going under image.i don't want utilize 50 "br" tags can write under it.do know what's problem guys ?

.poze { max-width: 100%; margin-top: 0.5em; margin-bottom: 1em; -webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 0px 20px; background: white; border: 1px solid #ccc; border-bottom-left-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; padding: 8px; " } .cerculet { display: block; } .cerculet:after { display: block; clear: both; content:' '; } .cerculet p { font-weight: bold; } .cerculet h2 { font-size: 120%; height: 145%; width: 1.6em; height: 1.6em; text-align: center; border-radius: 50%; background-color: black; color: white; white-space: nowrap; float: left; margin-right: 15px; }

that css.now i'll post html code:

<h2> <div class="cerculet"> <h2>2 </h2> <p> <font size="5" face="cambria"> gripa spaniola (1918 - 1919):<br> ucis intre 50 si 100 de milioane de oameni din intreaga<br> lume in mai putin de 2 ani </font> </p> </div> </h2> <br> <img src="http://s6.postimg.org/6oyuxe1e9/spanish_flu.jpg" class="poze" style="position:absolute; left:150px;"> <div> <h1> can see,the text doesn't go under image.how prepare problem guys? </h1> </div>

i hope you'll understand code.i mean,i used "4 spaces indent" or whatever , don't know if that's right way post code.if copy/paste all,it won't show right.. https://jsfiddle.net/9hw89uog/

remove position:absolute image styles, inline style in case

html css