adding a link to justified text - html

Question

I was wondering if I could seamlessly add a link to justified text. I would like for the link to be justified within the text and keep its position. The desired output will look like one paragraph. I have tried two methods thus far.
one
The html :
<div>
<p>This is a chunk of text. This is a chunkof text. This is a chunk of text.</p>
This is a link.
<p>This is a chunk of text. This is a chunk of text. This is a chunk of text.</p>
</div>
css :
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
}
p, a {
position: relative;
float: left;
text-align: justify;
display: inline;
}
the result is :
a chunk of text, a line break, the link, a line break, then the last chunk of text.
I would like to seamlessly add the link to the justified text. is that possible with just css?
two
When I put the link in the paragraph, it seems to randomly insert it near the actual location between text nodes. Could be treating the link as one word?
html :
<div>
<p>This is a chunk of text. This is a chunkof text. link-> This is a link.<-link This is a chunk of text.</p>
<p>This is a chunk of text. This is a chunk of text. This is a chunk of text.</p>
</div>
In the output the link does not line up with "link-> <-link"
I suppose if this is the better of the two options I would just like to know why the link won't line up with it's position alliterative to the text nodes. "link->", "<-link"

Answer 1

Your code is working as it should be for inline but in your css you have
div {
width: 200px;
}
and all other elements are inside that div so it's your div that causing the line breaks, if you set the width of your div more then it'll be displayed in one line, which is (inline) working right now.
Example.
Update: Also you may try this
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
text-align: justify;
}
p{
display: inline;
}
a{
float:left;
}
​

Answer 2

Like Heera mentioned.
div {
width: 200px;
}
Is causing the line breaks as that is probably not wide enough. You will need to increase that.
If you are wanting the link to line up with the text than do it like this.
<div>
<p>This is a chunk of text. This is a chunkof text. This is a chunk of text.
This is a link.</p>
<p>This is a chunk of text. This is a chunk of text. This is a chunk of text.</p>
</div>
Other wise you would have to add a class for both the link and paragraph tag to make them float and display inline. It would be simpler to just do the above method.
If you rather do it the other way than this should work
<div>
<p class="firstP">This is a chunk of text. This is a chunkof text. This is a chunk of text.</p>
This is a link.
<div class="breaker"></div>
<p>This is a chunk of text. This is a chunk of text. This is a chunk of text.</p>
</div>
p.firstP {
float: left;
display: inline-block;
}
div a {
float: left;
display: inline-block;
}
.breaker {
clear: both;
}