I've added this image of piggy so it would be next to the text, but when I'm trying to add horizontal line and text, it doesn't show up under the image and texts but stays with image.[Screenshot](https://i.stack.imgur.com/DaXC1.png)

HTML: 

```
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Sími portfólio</title>
  <link rel="stylesheet" type="text/css" href="pokus1.css" />
  </head>
  <body>

   <div id="hlavni">

   <h1 id="nadpis"> XXXXXXXXXXXXXX </h1>

   <p id="text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
   In dapibus augue non sapien. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam ornare wisi eu metus. 
   Duis viverra diam non justo. Etiam posuere lacus quis dolor. Pellentesque arcu. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nulla est. 
   Phasellus faucibus molestie nisl. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nam sed tellus id magna elementum tincidunt. 
   Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Integer tempor. Pellentesque arcu.   </p>         

   </div>

   <img src="tučík.png" alt="prasátko" id="prasatko">

   <hr>

   <p> . Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam ornare wisi eu metus. 
   Duis viverra diam non justo. Etiam posuere lacus quis dolor. </p> 

  </div>
  </body>
</html>

```

CSS: 

```
body {
display:block;
width: 800px;
margin-top: 10px;
margin-left: 550px;
margin-right: 550px; 
background-image: url("pozadi.png");
overflow: hidden;
}
#hlavni {
clear: both;
overflow: hidden;}

#nadpis {
display:block;
background-color: grey;
font-size: 50px;
font-family: Garamond;
font-style: italic;
padding: 8px;
overflow: hidden;}

#text {
line-height: 30px;
font-size: 20px;
float: right;
clear: right;
width: 55%;
overflow: hidden;
}

#prasatko {
height: 300px;
width: 300px;
position: relative;
right: 60px;
bottom: 50px;
float: left;
clear: left;
overflow: hidden;
 }

```

Thanks for your help, I've tried overflow: hidden or clear: both but nothing works