How to get <href link> showing up within the flow of <p> - html

Question

Okay so I am trying to integrate a link into the flow of the paragraph (directly to the right of '1.' but for some reason it is not showing up? How do I make it integrate into the flow.
Here is a http://jsfiddle.net/5CMfv/ for reference
Thanks
<div id="home-infobox">
<div class="infobox_picture">
<img src="images/image1.png" width="91" height="90">
<a style="position:absolute; padding-left:30px;"><h1>Image1</h1><p>Kappa kappa kaap 1. <p>more</p></a>
</div>
<div class="infobox_picture">
<img src="images/news.jpg" width="92" height="90">
<a style="position:absolute; padding-left:30px;"><h1>NEWS</h1><p>DKappakpapapapa</p> </a>
</div>
<div class="infobox_picture">
<img src="images/314.JPG" width="93" height="90">
<a style="position:absolute; padding-left:30px;"><h1>The Team</h1><p>KappaKappa </p> </a>
</div>
</div>
#home-infobox{
height: 335px;
background-color:#425eb4;
background-repeat: no-repeat;
background-position: left top;
width: 450px;
float: left;
position: absolute;
top:250px;
left:80px;
}
#home-infobox{
height: 335px;
background-color:#425eb4;
background-repeat: no-repeat;
background-position: left top;
width: 450px;
float: left;
position: absolute;
top:250px;
left:80px;
}
.infobox_picture {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
clear: both;
background-position: center bottom;
background-repeat: no-repeat;
background-color: white;
height: 90px;
position: relative;
}
.home-infobox ~ .home-infobox:before {
content: '';
position: absolute;
left: 0;
top: -8px;
width: 100%;
border-top: 1px solid black;
}
#home_infobox p a{
color: #3B4B7E;
text-decoration: none;
z-index:999;
position:relative;
}
#home_infobox p a:hover{
color: #475883;
text-decoration: underline;
}
h1 {font-family:'Montserrat', sans-serif; font-size:15px; position:relative; z- index:999}
h2 {font-family: 'Montserrat', sans-serif; font-size:25px; position:relative;}
h3 {font-family:'Montserrat', sans-serif; font-size:15px; position:relative; z-index:999}

Answer 1

You have invalid HTML:
<p>Kappa kappa kaap 1.<p>more</p>
should be:
<p>Kappa kappa kaap 1. more</p>
On further inspection, you have other HTML issues as well.
http://validator.w3.org/

Answer 2

You can do it like this:
<div class="infobox_picture">
<img src="images/image1.png" width="91" height="90">
<div style="display:inline-block; position:absolute; padding-left:30px;">
<h1>Image1</h1>
<p>Kappa kappa kaap 1.</p>
<p>more</p>
</div>
</div>
An a element always has to have an href attribute. It's better to put an 'a' inside a text element. So, i'va put a div element on de place where you had an 'a' element, and added the display:inline-block css-property to make this block element behave somewhat like the inline 'a' element.