CODEWITHSUNDEEP
htmlcss
Cody
Cody

Reputation: 8944

Better way to align bottom right

Is there a better way to align something in the bottom right of a cell?

I have a div which only contains a background image, 10px by 10px. I am using the following styles to put it in the bottom right corner. (The cell I have it in is 40px high.)

Doing it this way causes me to lose the 30px above the div. (I'm also using it as something to click, so I can click anywhere on the right instead of only the bottom corner of the cell.)

.time_note { float:right; width:20%; min-height:40px; display:block; 
    margin-right:-5px; }
.time_note { background:url('/images/sheet/note_marker.png') no-repeat; 
    background-position:bottom; }

If this could also be done NOT using margins, that would be great.

Example Image:

enter image description here

Upvotes: 3

Views: 24125

Answers (4)

Javier Hidalgo Jurado
Javier Hidalgo Jurado

Reputation: 1

try:

background-position:bottom right;

Upvotes: 0

Justin Pihony
Justin Pihony

Reputation: 67065

I believe what you are looking for is this, you just need to modify it to be on the right

Sticky footer

Upvotes: -1

bobek
bobek

Reputation: 8022

You should make your wrapping class position:relative; and then whatever you have inside you can position absolutely position:absolute; bottom:0; right:0;

For example

HTML:

<div class="wrapper">
<div class="arrow"></div>
</div>

CSS:

.wrapper
{
width:100px;
height:100px;
position:relative;
}

.arrow
{
width:10px;
height:10px;
position:absolute;
right:0px;
bottom:0px;
}

Upvotes: 14

Steve
Steve

Reputation: 8640

You could position: absolute, and bottom: 0; right:0; to place it on the bottom right of the parent element (which needs position: relative;). Of course, this has the danger of overlapping some other info in that element.

Upvotes: 2

Related Questions