Member Avatar for Member #743307

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="">Google</a>



With the following text there should be a read more link. This is because th

				

				<a href="">Read More..</a>	

            </p>

            

			<p class="info">

            	Tuesday 13th September 2011 - 2:28pm &bull; Comments Disabled            </p>

		</article>


Any help would be much appreciated.

editbox.PNG 20.08 KB
  • 2 Contributors
  • 2 Replies
  • 2K Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by lps

Dani AI

Generated

@doctorphp your first approach was almost there. The missing piece is to give the container (the element you want to anchor inside) a positioning context. Absolute elements position themselves relative to the nearest ancestor that is not position: static. Without that, they stick to the page. Your float + negative margin workaround will drift when the title wraps, fonts change, or on small screens.

Try this instead. Make the .post (or the article) the positioned parent, then absolutely place the edit badge. This will sit above the floated .post_image and won’t affect layout. Add a small z-index if it tucks under other content.

#news .post { position: relative; }

#news .post .edit-badge {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  padding: 2px 6px;
  background: #fff;
  border: 1px solid #ccc;
  font: 12px/1 Arial, sans-serif;
  z-index: 2;
}
<article class="post">
  <h1><a href="news.php?post=9">Test Post</a></h1>
  <a class="edit-badge" href="news.php?action=edit&id=9">Edit</a>
  ...
</article>

If you prefer the Edit link in the header row (not overlaying content), wrap the title and action in a small header and use flexbox:

.post-header { display: flex; align-items: flex-start; gap: 0.5rem; }
.post-header .spacer { margin-left: auto; }
<div class="post-header">
  <h1>Test Post</h1>
  <span class="spacer"></span>
  <a class="edit-badge" href="#">Edit</a>
</div>

Either pattern is more robust than negative margins and will behave predictably as content and screen sizes change. And +1 to : once this works for you, mark the thread solved.

Recommended Answers

All 2 Replies

Member Avatar for Member #743307

Sorry! I fixed it!

#newsEdit {
 float: right;
 margin-top: -35px;
}
Member Avatar for lps

If the problem is solved, please mark it as 'solved' thread. Thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.