How to Put Text in the Upper Right, or Lower Right Corner of a "Box" Using CSS

How to put text in the upper right, or lower right corner of a box using css

<div style="position: relative; width: 250px;">  <div style="position: absolute; top: 0; right: 0; width: 100px; text-align:right;">    here  </div>  <div style="position: absolute; bottom: 0; right: 0; width: 100px; text-align:right;">    and here  </div>  Lorem Ipsum etc <br />  blah <br />  blah blah <br />  blah <br />  lorem ipsums</div>

Placing an image to the top right corner - CSS

You can just do it like this:

<style>
    #content {
        position: relative;
    }
    #content img {
        position: absolute;
        top: 0px;
        right: 0px;
    }
</style>

<div id="content">
    <img src="images/ribbon.png" class="ribbon" alt="" />
    <div>some text...</div>
</div>

How to position a div in bottom right corner of a browser?

This snippet works in IE7 at least

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test</title>
<style>
  #foo {
    position: fixed;
    bottom: 0;
    right: 0;
  }
</style>
</head>
<body>
  <div id="foo">Hello World</div>
</body>
</html>

Getting the button into the top right corner inside the div box

Just add position:absolute; top:0; right:0; to the CSS for your button.

 #button {
     line-height: 12px;
     width: 18px;
     font-size: 8pt;
     font-family: tahoma;
     margin-top: 1px;
     margin-right: 2px;
     position:absolute;
     top:0;
     right:0;
 }

jsFiddle example

Top/Right triangle with text in CSS

You have to make some adjustments since the triangle will naturally align to the left, you can't just rotate it the other way, you also need to use absolute positioning so it lines up on the right. This also requires some adjustments to be made to the positioning of the text:

.container {  width: 250px;  height: 250px;  position:relative;  background-color:grey;}
.corner {  width: 0;  height: 0;  border-top: 150px solid #ffcc00;  border-bottom: 150px solid transparent;  border-left: 150px solid transparent;  position:absolute;  right:0;}
.corner span {  position:absolute;  top: -110px;  width: 100px;  left: -100px;  text-align: center;  font-size: 16px;  font-family: arial;  transform: rotate(45deg);  display:block;}

<div class="container">  <div class="corner"><span>20% Special Offer</span></div></div>

CSS : Float a number value on the right top corner of an image

You can try this...

<span class="bell">
        <img src=https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png alt=alerts>
    <span class="bellnumbers">10</span>
</span>

.bell {
    display: inline-block;
    position: relative;
    background-color: #eee;
    width: 48px;
    height: 42px;
    text-align: center;
    padding-top: 6px;
}
.bell img {
    width: 24px;
    height: 24px;
    padding-top: 10px;
}
.bellnumbers {
    font-size:12px;
    background-color:red;
    width:16px;
    line-height: 16px;
    text-align: center;
    color:#fff;
    z-index: 2;
    border-radius: 3px;
    position: absolute;
    left: 28px;
}

JSFiddle

how to place last div into right top corner of parent div? (css)

.block1 {    color: red;    width: 100px;    border: 1px solid green;    position: relative;}
.block2 {    color: blue;    width: 70px;    border: 2px solid black;    position: absolute;    top: 0px;    right: 0px;}

<div class='block1'>  <p>text</p>  <p>text2</p>  <div class='block2'>block2</div></div>

CSS for top right corner of the page

If the text isn't an image, none of the other answers will work. Here is some css that rotates a div 45 degrees and works in IE + FF + Webkit.

#yourdiv
{
    top: 0px;
    right: 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
     transform: rotate(45deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(M11='0.7071067811865476', M12='-0.7071067811865475', M21='0.7071067811865475', M22='0.7071067811865476', sizingMethod='auto expand');
}

How to place a div outside the upper right corner of my form using bootsrap?

You can use position: absolute; right: 0; to the div with the class row on your custom css, just like this example: https://codepen.io/anon/pen/gNXxxb

I just added the "my-custom-class" to the row and edited it on the css

Keep text in bottom of page in mobile

You want to use position: fixed, not absolute.

How to Put Text in the Upper Right, or Lower Right Corner of a "Box" Using CSS