Hey everyone,
I am having some trouble positioning a div in the top right corner of another div. This is what I would like to have.
But I cannot get it to work. I tried
#edit {
position: absolute;
top: 0;
right: 0;
}
This is the css for the news div.
/*news*/
#news {
margin:20px 0 0 0;
}
#news .post h1 {
line-height:1.1em;
}
#news .post{
margin-bottom:20px;
line-height:1.4em;
min-height:120px;
}
#news .post h1{
margin:0 0 5px 0;
font-weight:normal;
font-family:Arial;
font-size:2em;
}
#news .post h1 a{
text-decoration:none;
}
#news .post p.info{
margin:10px 0 0 0;
font-weight:bold;
}
#news .post p.body {
margin:10px 0 0 0;
}
#news .post .post_image {
width:190px;
height:120px;
border:1px solid #e0e0e0;
float:left;
margin:0 10px 0 0;
background:#fff;
padding:5px;
}
#news .post .post_image:hover {
border:1px solid #505C65;
}
#newsEdit {
display: block;
position: absolute;
top: 0;
right: 0;
}
/*newsend*/
This is the html
<article>
<h1><a href="news.php?post=9">Test Post</a></h1>
<div id="edit">Edit</div>
<p class="body">
This is a test post.
This is a new paragraph.
This is a new line.
<span class="bold">This is bold text.</span>
<span class="italic">This is italic text.</span>
<span class="strike">This is strike through text.</span>
<span class="underline">This is underlined text.</span>
Below is a link
<a href="http://www.megainstrumentals.co.uk">Google</a>
With the following text there should be a read more link. This is because th
<a href="http:///news.php?id=2">Read More..</a>
</p>
<p class="info">
Tuesday 13th September 2011 - 2:28pm • Comments Disabled </p>
</article>
Any help would be much appreciated.