I have the following SubSection “box” on my website…
In the lower right-hand corner of this box, I would like to place the following link…
<< View all MARKETS articles… >>
What is the best way to accomplish this??
BTW, sometimes a SubSection “box” might require the link above to have Padding between it and the Article hyperlinks…
Hope that makes sense?!
Sincerely,
Debbie
The safest way is to set the box to position: relative, give it some bottom padding to accommodate the link, and set the link to position: absolute, bottom: 0; right: 0 or similar. I suggest the padding because you don’t want the link to overlap your other content.
If you don’t like the idoe of the whole box having padding along it, you could bethaps place padding just at the bottom of the right hand column, I guess.
The box I showed you is nested in another box called “Finance”, which i believe is nested is some others as part of a fancy layout that Paul O’ helped me with many moons ago.
If I recall correctly, to take you advice, wouldn’t I have to screw with all of those “parent” boxes and make them position: relative as well??
(I hope not, as that could have a far-reaching impact on my entire website layout…) :-/
Sincerely,
Debbie
Hi, Debbie,
It sounds like you would want to apply the padding to the bottom of the box with the links to assure space for the p:a’d link (the padding that you mentioned needing) and give the parent box “finance” position:relative.
position:relative should normally be applied to the closest ancestor that achieves the goal to prevent potentially interfering with other p:a’d elements.
Not sure if I am following you.
I had asked Ralph if I need to take his advice, but apply position:relative to every <div> box that encapsulates the inner most “Markets” box in my OP.
Is that the case?
(I hope not, because Paul O’ helped me create a fairly complex page layout, and I do my best to touch anything that deals with those outer layout containers.)
Follow me?
Sincerely,
Debbie
Only the closest ancestor that supports the desired position of the p:a’d element needs to be position:relative.
The p:a’d element will be relative to the first ancestor that is positioned other than static (position:relative in this case).
You do NOT need to apply p:r to every nest (level); only to the innermost level that allows the p:a’d element to be positioned as desired.
Let me revise my previous message to say that the box “Markets” should be the one that is position:relative and the link destined for the bottom right container should be position:absolute. And, as Ralph suggested, that right container should have some padding-bottom added to preserve some empty space for the p:a’d link.
Ralph & ronpat,
Thanks for the tips and clarification.
Since my OP, I’m sorta in a holding pattern until I hopefully get some help on re-doing my Page Semantics here.
I’ll let you know how things work out.
Sincerely,
Debbie
At first i thought you wanted to line up all your links at the bottom, then i realized it was an additional SEPARATE element you are after. Try this as a proof of concept.
.sub{width: 35em; border: 1px solid #ccc; padding:.5em; }
h4.sub{background: #eee; border-radius: 12px 12px 0 0; margin:0;border-bottom: none }
div.sub{ border-radius: 0 0 12px 12px ;border-top: none }
.imgs {float:right;}
h5,p {margin:0;}
.cont, .links{display:inline-block; }
.links{vertical-align: top; margin-top:0; padding-bottom:-3em}
.cont{width:55%}
.more{float:right; margin-top: -1.25em ; text-align: right; padding-right: .5em ;max-width:45%}
<h4 class="sub">Markets</h4>
<div class="sub">
<div class='cont'>
<div class='imgs'> <img src="#" height=100; width=100></div>
<h5>Wow this is a low ranking headline Wow this is a low ranking headline</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu lore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
<ul class="links">
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item longer sample item</a></li>
<li><a href="#">item</a></li>
</ul>
<div class="more"><a href="#"><<view market>></a></div>
</div>
hope that helps
Okay, so I tried to apply what you and Ronpat recommended, and here is what I have…
<div class='boxSubSection'>
<h3>Economy</h3>
<div class='subFeatured'>
<a href=''>
<img src="/images/WindTurbineAtSunset_100x74.png" width=100" alt="" title="" />
<h4>Best Cities for Small-Business</h4>
</a>
<p>Opening up a small business in a tough economy is a risky gamble. But these 10 states saw more startup activity than anywhere else nationwide.</p>
</div>
<div class='subArticles'>
<ul>
<li>
<a href='/finance/economy/fastest-growing-small-business-sectors-for-2013'>Fastest Growing Small-Business Sectors for 2013</a>
</li>
<li>
<a href='/finance/economy/which-states-support-main-street'>Which States Support Main Street?</a>
</li>
<li>
<a href='/finance/economy/sec-silent-as-crowdfunders-wait'>SEC Silent as Crowdfunders Wait</a>
</li>
<li>
<a href='/finance/economy/sequester-could-lead-to-more-start-ups'>Sequester Could Lead to More Start-ups</a>
</li>
</ul>
<p class='moreArticles'><< View more ECONOMY articles... >></p>
</div>
</div>
And here are my Styles…
.boxSubSection,
#boxMainContent,
#boxMyAccount,
#boxMemberProfile{
margin: 20px 0;
padding: 0 15px 15px 15px;
border: 1px solid #AAA;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
.boxSubSection{
margin: 30px 0 0 0;
position: relative; /* 2013-05-22 */
overflow: hidden;
}
.moreArticles{
position: absolute;
bottom: 0;
right: 0;
padding: 0 30px 10px 0;
}
I think this looks pretty good, but…
Comments/Questions:
1.) If I add Top Padding to .moreArticles, it doesn’t do anything.
I need to ensure there is a certain amount of spacing between my Articles Links and the “View more ECONOMY articles…” link. (If the Article Summary on the left wasn’t there, the Article Links and the View More Articles link would collapse together and be touching, which I do NOT want!!)
Here is an updated screen-shot to show what I mean…
How do I do that??
2.) What HTML Tag would you use to wrap “View more ECONOMY articles…”?
3.) Is there a problem using this syntax for my link… “<< View more ECONOMY articles… >>”
4.) Overall, did I do things the way you guys intended, and how do you think things look so far?
Sincerely,
Debbie
Hi, Debbie,
Looks like your code needs some code. 
I can’t tell how the left and right sections are designed… as floats or inline-block or what, and that’s important. The classes subFeatured and subArticles do not have supporting css. As a result, there are no left and right sections; everything is in one wide container.
It looks like you’ve got the right idea, though.
No, padding-top added to your absolutely postioned element won’t do a thing since the element is absolutely removed from the normal flow. To assure adequate space between the links above moreArticles and moreArticles, you will need to pad the bottom of the links’ container.
Coding hint: I like to add {outline:1px solid magenta;} (pick your favorite colors) around boxes as I work up a page to help visualize how things are working. The outline does not interfere with the layout.
I worked up a couple of different ways to accomplish this layout. A couple using a floated elements and one with inline-blocks similar to dresden_phoenix’s example. Whatever floats your boat. Do they say that in AZ?
(your attachment has not yet been approved.)
Okay, okay, I’ll cough up some more code to help you help me! 
/*********************/
/* BOX HEADER Styles */
/*********************/
#boxFeaturedSubsections h2,
.boxSubSection h3{
/* Next two lines needed or IE6&7 won't show negative margins properly. */
position: relative;
zoom: 1.0;
margin: 0 -15px 0 -15px;
padding: 0.4em 15px 0.2em 15px;
text-align: left;
font-size: 1.1em;
font-weight: bold;
color: #FFF;
background-color: #AAA;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
/***************************/
/* FEATURED ARTICLE Styles */
/***************************/
#boxFeatured{
text-align: justify;
}
#boxFeatured h3{
font-size: 1.4em;
}
#boxFeatured span{
display: block;
}
#boxFeatured small{
font-style: italic;
}
#boxFeatured p{
line-height: 1.4em;
font-size: 0.8em;
}
And for the stuff you probably really care about…
.boxSubSection{
margin: 30px 0 0 0;
position: relative; /* 2013-05-22 */
overflow: hidden;
}
.boxSubSection h3{
margin: 0 -15px 1em -15px;
color: #333;
background-color: #EEE;
/* background-color: #B2FFFF; /**/
}
.subFeatured{
float: left;
width: 40%;
overflow: hidden;
}
.subFeatured a{
color: #333;
text-decoration: none;
}
.subFeatured a:hover{
color: #057ec2;
}
.subFeatured img{
float: right;
display: block;
margin: 0 0 0 15px;
}
.subFeatured h4{
padding: 0;
}
.subFeatured p{
/* line-height: 1.4em; /**/
}
.subArticles{
float: left;
width: 50%;
margin: 0 0 0 50px;
}
.subArticles ul li{
list-style-position: outside;
list-style-type: square;
padding: 0 0 0.2em 0;
}
.moreArticles{
position: absolute;
bottom: 0;
right: 0;
padding: 0 30px 10px 0;
}
I’ll play with that idea while you hopefully can check out my Styles above, and see if that helps you to help me!
I used to do that, but my advice to you is to Get FireBug which is the much more sophisticated way of doing things… 
Ha ha. Yes, we do!!
Yeah, that seems to be an issue lately… (If any Mods are out there, help is needed!)
Sincerely,
Debbie
Hi, Debbie,
Although there was no accompanying HTML, the CSS answered the question about how the containers were positioned… both floated left.
I think this will fulfill your wishes. If not, there are at least 5 other ways of doing it, and even this can probably be written more efficiently.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?1072092-How-to-Place-Link-in-Lower-Right-Hand-Corner
Thread: How to Place Link in Lower Right-Hand Corner?
2013.05.19 00:23
DoubleDee
1. 2 content containers float:left.
2. Added 2 divs to support the handling of div.moreArticles. The classes are named .new1 and .new2. Rename them however you wish.
3. .moreArticles is not absolutely positioned.
4. Added 1 div to keep the .moreArticles link from overlapping the text in the left column (the anchor's text will wrap). You can see the effect by narrowing the viewport or zooming text-only large. If the feature is not needed, you can delete the div.
5. The sum of the widths of .subFeatured and .subArticles should equal 100%. There are NO horizontal margins or padding on these 2 divs.
6. Tested in IE8, IE9, FF, Chrome, Opera.
-->
<head>
<title>link in lower right corner</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
.boxSubSection {
width:90%; /* In this example, width is 100% unless assigned otherwise. */
}
h2 {
border:1px solid #888;
border-bottom:none;
border-radius:12px 12px 0 0;
background-color:#fff;
font-size:1.2em;
padding:4px 12px;
margin:0;
}
.new1 {
border:1px solid #888;
border-top:none;
border-radius:0 0 12px 12px;
background-color:#cde;
}
.new2 {
overflow:hidden;
}
.subFeatured {
width:50%;
float:left;
padding-top:4px;
padding-bottom:.4em;
}
.subFeatured img {
float:right;
background-color:#fee;
margin:0 4px 8px 8px;
}
.subArticles {
width:50%;
float:left;
padding-top:4px;
padding-bottom:.4em;
}
ul {
padding:0 12px 2em 36px; /* padding-bottom preserves space for the .moreArticles link. */
margin:0;
}
li {
padding:.1875em 0;
}
.moreArticles {
text-align:right;
padding-bottom:.75em;
margin-top:-2em; /* margin-top pulls the link up into div.new2 */
}
.moreArticles div {
display:inline-block;
width:50%;
}
.moreArticles a {
display:inline-block;
font-size:1em;
text-align:center;
margin-right:1em;
}
h5,p {
margin:.4em 0 .4em 12px;
}
h5 {
font-size:.9em;
}
</style>
</head>
<body>
<div class="boxSubSection">
<h2>Economy</h2>
<div class="new1">
<div class="new2">
<div class="subFeatured">
<img src="image.png" width="100" height="120">
<h5>Wow this is a low ranking headline</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="subArticles">
<ul>
<li><a href="#">list item</a></li>
<li><a href="#">list item</a></li>
<li><a href="#">a longer sample list item link that may wrap</a></li>
<li><a href="#">list item</a></li>
<li><a href="#">list item</a></li>
<li><a href="#">list item</a></li>
<li><a href="#">list item</a></li>
</ul>
</div>
</div>
<div class="moreArticles"><div><a href="#">« View more ECONOMY articles... »</a></div></div>
</div>
</div>
</body>
</html>
ronpat,
I am reading your code now. (Would be much easier if you’d use the HTML and CSS bbcode tags instead!)
I fear I made you do way too much work… 
After I posted way too much this morning, I took your advice and changed this code, and things seem to be working now…
.subArticles{
float: left;
width: 50%;
margin: 0 0 2.5em 50px; /* Added Bottom-Padding to ensure space between last Article Link and "View more Articles..." link */
}
Sincerely,
Debbie
fear not… it’s always good exercise.
The reason for just using the code tags is that the example code is a complete page and can be copied and pasted into a file and opened in a browser with zero hassle.
Glad you found a solution on your own. That’s always a more rewarding feeling. :good:
Ron
Glad you are a good sport!
The reason for just using the code tags is that the example code is a complete page and can be copied and pasted into a file and opened in a browser with zero hassle.
Okay.
Glad you found a solution on your own. That’s always a more rewarding feeling. :good:
Ron
Don’t go anywhere, I have lots of follow up questions, and other broken stuff!! 
Sincerely,
Debbie