Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

layout

How would I get the here and and here to be on the right, on the same lines as the lorem ipsums? See the following:

Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here
like image 921
Corey Trager Avatar asked Sep 15 '08 18:09

Corey Trager


People also ask

How do I put text in the top right corner in CSS?

The top-right text should be set to position: absolute; top: 0; right: 0 . The bottom-right text should be set to position: absolute; bottom: 0; right: 0 .

How do I center text from top to bottom in CSS?

To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.

How do I put an image in the top right corner in CSS?

Try using float: right; and a new div for the top so that the image will stay on top.


2 Answers

<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>

Gets you pretty close, although you may need to tweak the "top" and "bottom" values.

like image 170
Garry Shutler Avatar answered Sep 17 '22 15:09

Garry Shutler


Float right the text you want to appear on the right, and in the markup make sure that this text and its surrounding span occurs before the text that should be on the left. If it doesn't occur first, you may have problems with the floated text appearing on a different line.

<html>
  <body>
    <div>
      <span style="float:right">here</span>Lorem Ipsum etc<br/>
      blah<br/>
      blah blah<br/>
      blah<br/>
      <span style="float:right">and here</span>lorem ipsums<br/>
    </div>
  </body>
</html>

Note that this works for any line, not just the top and bottom corners.

like image 21
phloopy Avatar answered Sep 17 '22 15:09

phloopy