tags:

views:

48

answers:

3

Hi all, I'm having some trouble figuring out how to position a paragraph and link within a container div, it is illustrated in the code following the explanations. So basically, there are a overall container (#container) that contains an arbitrary number of divs (.c). In each of the individual divs, there are a paragraph and a link. I would like no matter how long the paragraph is, the link will always float on top right corner of the each individual divs. However, currently it is displaying the link on the top right corner of the next div for some reason...

If anyone can help me resolve this and perhaps enlighten me on this matter it would be greatly appreciated!

<head>
<style type="text/css">
#container{
 width:500px;
}
p{
 width:450px;
}
a{
 float:right;
}
</style>
</head>
<div id="container">
<div class="c"><p>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p><a href="delete.php">X</a></div>

<div class="c"><p>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p><a href="delete.php">X</a></div>
</div>
A: 

Try putting the <a> element before the <p> element, I guess that should do the trick.

JorenB
+1  A: 

Place the anchor tag before the paragraph tag and it will float to the right of the paragraph, but this will limit the width of the paragraph.

If you really want it over the paragraph, use:

#container { position:relative; } a { position: absolute;top:0;right:0}

The latter method will allow the anchor to be positioned on top of the paragraph if so desired.

jkelley
A: 

Put the link before the paragraph. Floated content floats to the side of the content following it, not the content before it.

Amber