4 Replies - 1021 Views - Last Post: 19 October 2013 - 04:25 AM

#1 Peter O  Icon User is offline

  • D.I.C Head

Reputation: 76
  • View blog
  • Posts: 181
  • Joined: 19-October 13

Place text in bottom right corner

Posted 19 October 2013 - 03:05 AM

I have a dynamic width container with some text. I also want to place a few words in a smaller font size in the bottom right corner of the container.
<div id="container">
	text text text text text text text text text text text text text text
	<span id="corner">abc def</span>
</div>

I have tried absolute positioning the corner text ...
#container
{
	border:1px solid black;
	font-size:16px;
	position:relative;
}
#corner
{
	font-size:11px;
	background-color:yellow;
	bottom:0px;
	right:0px;
	position:absolute;
}
... but then the corner text can overlap the other text.

I have also tried using float right.
#container
{
	border:1px solid black;
	font-size:16px;
	overflow:auto;
}
#corner
{
	font-size:11px;
	background-color:yellow;
	float: right;
}
This fixes the overlapping problem but there is another problem. If the corner text is not placed on its own line it will not be placed all the way down to the bottom.

To fix this you might think that we just have to make sure that #corner has the same line height as the 16px text by inserting some top padding but that will add additional space between the corner text and the above line if the corner text is placed on its own line.

To summarize, how can I place the corner text so that it:
  • never overlaps the other text.
  • is always placed all the way to the bottom.
  • never takes up more space than needed.


Is This A Good Question/Topic? 0
  • +

Replies To: Place text in bottom right corner

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3369
  • View blog
  • Posts: 11,411
  • Joined: 12-December 12

Re: Place text in bottom right corner

Posted 19 October 2013 - 03:31 AM

You can use absolute-positioning by giving the container a padding-bottom of at least 11px, so that the corner sits inside this padding.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3369
  • View blog
  • Posts: 11,411
  • Joined: 12-December 12

Re: Place text in bottom right corner

Posted 19 October 2013 - 03:38 AM

It is possible to use floats by inserting an empty element before the corner, with clear: right; but this is a poor choice. Inserting empty, non-semantic, elements to solve layout issues is very much discouraged in modern web-design.
Was This Post Helpful? 0
  • +
  • -

#4 Peter O  Icon User is offline

  • D.I.C Head

Reputation: 76
  • View blog
  • Posts: 181
  • Joined: 19-October 13

Re: Place text in bottom right corner

Posted 19 October 2013 - 03:53 AM

That will always place the corner text below the other text. I don't want that. I want the other text to be shown to the left of the corner text if it fits.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3369
  • View blog
  • Posts: 11,411
  • Joined: 12-December 12

Re: Place text in bottom right corner

Posted 19 October 2013 - 04:25 AM

You could use float and give the corner margin-top: 5px;. This will keep the corner at the bottom if this text is inline with other text. There are a few other ways to achieve this but this is the simplest. You might also explore margin-left in case you want to keep this corner separated from other text on the same line. (Padding can work equally as well.)

If the corner text is on a line of its own then it will still have this 5px gap above, but IMO you need this otherwise it will be too close to (touching) the text above it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1