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

Question

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

User · Accepted Answer

x000D   x000D   lt div style  position  relative  width  250px   gt  x000D     lt div style  position  absolute  top  0  right  0  width  100px  text-align right   gt  x000D      here x000D     lt  div gt  x000D     lt div style  position  absolute  bottom  0  right  0  width  100px  text-align right   gt  x000D      and here x000D     lt  div gt  x000D    Lorem Ipsum etc  lt br   gt  x000D    blah  lt br   gt  x000D    blah blah  lt br   gt  x000D    blah  lt br   gt  x000D    lorem ipsums x000D   lt  div gt  x000D   x000D   x000D    Gets you pretty close  although you may need to tweak the  top  and  bottom  values

User · Answer

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    lt html gt     lt body gt       lt div gt         lt span style  float right  gt here lt  span gt Lorem Ipsum etc lt br  gt        blah lt br  gt        blah blah lt br  gt        blah lt br  gt         lt span style  float right  gt and here lt  span gt lorem ipsums lt br  gt       lt  div gt     lt  body gt   lt  html gt    Note that this works for any line  not just the top and bottom corners

User · Answer

You need to put  here  into a  lt div gt  or  lt span gt  with style  float  right

User · Answer

If the position of the element containing the Lorum Ipsum is set absolute  you can specify the position via CSS  The  here  and  and here  elements would need to be contained in a block level element  I ll use markup like this   print   lt div id  lipsum  gt     print   lt div id  here  gt     print    here    print   lt  div gt     print   lt div id  andhere  gt     print  and here    print   lt  div gt     print  blah    print   lt  div gt       Here s the CSS for above     lipsum  position absolute top 0 left 0      example     here  position absolute top 0 right 0    andhere  position absolute bottom 0 right 0     Again  the above only works  reliably  if  lipsum is positioned via absolute   If not  you ll need to use the float property     here   andhere  float right     You ll also need to put your markup in the appropriate place  For better presentation  your two divs will probably need some padding and margins so that the text doesn t all run together

User · Answer

lt style gt     content   width  300px  height  300px  border  1px solid black  position  relative       topright   position  absolute  top  5px  right  5px  text-align  right       bottomright   position  absolute  bottom  5px  right  5px  text-align  right     lt  style gt   lt div id  content  gt     lt div class  topright  gt here lt  div gt     lt div class  bottomright  gt and here lt  div gt    Lorem ipsum etc                  lt  div gt

User · Answer

Or even better  use HTML elements that fit your need   It s cleaner  and produces leaner markup   Example    lt dl gt      lt dt gt Lorem Ipsum etc  lt em gt here lt  em gt  lt  dt gt      lt dd gt blah lt  dd gt      lt dd gt blah blah lt  dd gt      lt dd gt blah lt  dd gt      lt dt gt lorem ipsums  lt em gt and here lt  em gt  lt  dt gt   lt  dl gt    Float the em to the right  with display  block   or set it to position  absolute with its parent as position  relative

User · Answer

The first line would consist of 3  lt div gt s  One outer that contains two inner  lt div gt s  The first inner  lt div gt  would have float left which would make sure it stays to the left  the second would have float right  which would stick it to the right    lt div style  width 500 height 50  gt  lt br gt   lt div style  float left   gt stuff  lt  div gt  lt br gt   lt div style  float right   gt stuff  lt  div gt        obviously the inline-styling isn t the best idea - but you get the point   2 3  and 4 would be single  lt div gt s   5 would work like 1

User · Answer

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    lt html gt     lt body gt       lt div gt         lt span style  float right  gt here lt  span gt Lorem Ipsum etc lt br  gt        blah lt br  gt        blah blah lt br  gt        blah lt br  gt         lt span style  float right  gt and here lt  span gt lorem ipsums lt br  gt       lt  div gt     lt  body gt   lt  html gt    Note that this works for any line  not just the top and bottom corners

User · Answer

You need to put  here  into a  lt div gt  or  lt span gt  with style  float  right

User · Answer

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    lt html gt     lt body gt       lt div gt         lt span style  float right  gt here lt  span gt Lorem Ipsum etc lt br  gt        blah lt br  gt        blah blah lt br  gt        blah lt br  gt         lt span style  float right  gt and here lt  span gt lorem ipsums lt br  gt       lt  div gt     lt  body gt   lt  html gt    Note that this works for any line  not just the top and bottom corners

User · Answer

Or even better  use HTML elements that fit your need   It s cleaner  and produces leaner markup   Example    lt dl gt      lt dt gt Lorem Ipsum etc  lt em gt here lt  em gt  lt  dt gt      lt dd gt blah lt  dd gt      lt dd gt blah blah lt  dd gt      lt dd gt blah lt  dd gt      lt dt gt lorem ipsums  lt em gt and here lt  em gt  lt  dt gt   lt  dl gt    Float the em to the right  with display  block   or set it to position  absolute with its parent as position  relative

User · Answer

lt style gt     content   width  300px  height  300px  border  1px solid black  position  relative       topright   position  absolute  top  5px  right  5px  text-align  right       bottomright   position  absolute  bottom  5px  right  5px  text-align  right     lt  style gt   lt div id  content  gt     lt div class  topright  gt here lt  div gt     lt div class  bottomright  gt and here lt  div gt    Lorem ipsum etc                  lt  div gt

User · Answer

You only need to float the div element to the right and give it a margin  Make sure dont use  absolute  for this case    date     margin-right 5px    position relative    float right

User · Answer

You may be able to use absolute positioning   The container box should be set to position  relative   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   You ll need to experiment with padding to stop the main contents of the box from running underneath the absolute positioned elements  as they exist outside the normal flow of the text contents

User · Answer

You may be able to use absolute positioning   The container box should be set to position  relative   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   You ll need to experiment with padding to stop the main contents of the box from running underneath the absolute positioned elements  as they exist outside the normal flow of the text contents

User · Answer

The first line would consist of 3  lt div gt s  One outer that contains two inner  lt div gt s  The first inner  lt div gt  would have float left which would make sure it stays to the left  the second would have float right  which would stick it to the right    lt div style  width 500 height 50  gt  lt br gt   lt div style  float left   gt stuff  lt  div gt  lt br gt   lt div style  float right   gt stuff  lt  div gt        obviously the inline-styling isn t the best idea - but you get the point   2 3  and 4 would be single  lt div gt s   5 would work like 1

User · Answer

The first line would consist of 3  lt div gt s  One outer that contains two inner  lt div gt s  The first inner  lt div gt  would have float left which would make sure it stays to the left  the second would have float right  which would stick it to the right    lt div style  width 500 height 50  gt  lt br gt   lt div style  float left   gt stuff  lt  div gt  lt br gt   lt div style  float right   gt stuff  lt  div gt        obviously the inline-styling isn t the best idea - but you get the point   2 3  and 4 would be single  lt div gt s   5 would work like 1

User · Answer

Or even better  use HTML elements that fit your need   It s cleaner  and produces leaner markup   Example    lt dl gt      lt dt gt Lorem Ipsum etc  lt em gt here lt  em gt  lt  dt gt      lt dd gt blah lt  dd gt      lt dd gt blah blah lt  dd gt      lt dd gt blah lt  dd gt      lt dt gt lorem ipsums  lt em gt and here lt  em gt  lt  dt gt   lt  dl gt    Float the em to the right  with display  block   or set it to position  absolute with its parent as position  relative

User · Answer

You need to put  here  into a  lt div gt  or  lt span gt  with style  float  right

User · Answer

The first line would consist of 3  lt div gt s  One outer that contains two inner  lt div gt s  The first inner  lt div gt  would have float left which would make sure it stays to the left  the second would have float right  which would stick it to the right    lt div style  width 500 height 50  gt  lt br gt   lt div style  float left   gt stuff  lt  div gt  lt br gt   lt div style  float right   gt stuff  lt  div gt        obviously the inline-styling isn t the best idea - but you get the point   2 3  and 4 would be single  lt div gt s   5 would work like 1

User · Answer

Or even better  use HTML elements that fit your need   It s cleaner  and produces leaner markup   Example    lt dl gt      lt dt gt Lorem Ipsum etc  lt em gt here lt  em gt  lt  dt gt      lt dd gt blah lt  dd gt      lt dd gt blah blah lt  dd gt      lt dd gt blah lt  dd gt      lt dt gt lorem ipsums  lt em gt and here lt  em gt  lt  dt gt   lt  dl gt    Float the em to the right  with display  block   or set it to position  absolute with its parent as position  relative

User · Answer

lt style gt     content   width  300px  height  300px  border  1px solid black  position  relative       topright   position  absolute  top  5px  right  5px  text-align  right       bottomright   position  absolute  bottom  5px  right  5px  text-align  right     lt  style gt   lt div id  content  gt     lt div class  topright  gt here lt  div gt     lt div class  bottomright  gt and here lt  div gt    Lorem ipsum etc                  lt  div gt

User · Answer

You may be able to use absolute positioning   The container box should be set to position  relative   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   You ll need to experiment with padding to stop the main contents of the box from running underneath the absolute positioned elements  as they exist outside the normal flow of the text contents

User · Answer

You only need to float the div element to the right and give it a margin  Make sure dont use  absolute  for this case    date     margin-right 5px    position relative    float right

User · Answer

If the position of the element containing the Lorum Ipsum is set absolute  you can specify the position via CSS  The  here  and  and here  elements would need to be contained in a block level element  I ll use markup like this   print   lt div id  lipsum  gt     print   lt div id  here  gt     print    here    print   lt  div gt     print   lt div id  andhere  gt     print  and here    print   lt  div gt     print  blah    print   lt  div gt       Here s the CSS for above     lipsum  position absolute top 0 left 0      example     here  position absolute top 0 right 0    andhere  position absolute bottom 0 right 0     Again  the above only works  reliably  if  lipsum is positioned via absolute   If not  you ll need to use the float property     here   andhere  float right     You ll also need to put your markup in the appropriate place  For better presentation  your two divs will probably need some padding and margins so that the text doesn t all run together

User · Answer

If the position of the element containing the Lorum Ipsum is set absolute  you can specify the position via CSS  The  here  and  and here  elements would need to be contained in a block level element  I ll use markup like this   print   lt div id  lipsum  gt     print   lt div id  here  gt     print    here    print   lt  div gt     print   lt div id  andhere  gt     print  and here    print   lt  div gt     print  blah    print   lt  div gt       Here s the CSS for above     lipsum  position absolute top 0 left 0      example     here  position absolute top 0 right 0    andhere  position absolute bottom 0 right 0     Again  the above only works  reliably  if  lipsum is positioned via absolute   If not  you ll need to use the float property     here   andhere  float right     You ll also need to put your markup in the appropriate place  For better presentation  your two divs will probably need some padding and margins so that the text doesn t all run together

User · Answer

If the position of the element containing the Lorum Ipsum is set absolute  you can specify the position via CSS  The  here  and  and here  elements would need to be contained in a block level element  I ll use markup like this   print   lt div id  lipsum  gt     print   lt div id  here  gt     print    here    print   lt  div gt     print   lt div id  andhere  gt     print  and here    print   lt  div gt     print  blah    print   lt  div gt       Here s the CSS for above     lipsum  position absolute top 0 left 0      example     here  position absolute top 0 right 0    andhere  position absolute bottom 0 right 0     Again  the above only works  reliably  if  lipsum is positioned via absolute   If not  you ll need to use the float property     here   andhere  float right     You ll also need to put your markup in the appropriate place  For better presentation  your two divs will probably need some padding and margins so that the text doesn t all run together

User · Answer

You may be able to use absolute positioning   The container box should be set to position  relative   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   You ll need to experiment with padding to stop the main contents of the box from running underneath the absolute positioned elements  as they exist outside the normal flow of the text contents

User · Answer

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    lt html gt     lt body gt       lt div gt         lt span style  float right  gt here lt  span gt Lorem Ipsum etc lt br  gt        blah lt br  gt        blah blah lt br  gt        blah lt br  gt         lt span style  float right  gt and here lt  span gt lorem ipsums lt br  gt       lt  div gt     lt  body gt   lt  html gt    Note that this works for any line  not just the top and bottom corners

User · Answer

You need to put  here  into a  lt div gt  or  lt span gt  with style  float  right

User · Answer

lt style gt     content   width  300px  height  300px  border  1px solid black  position  relative       topright   position  absolute  top  5px  right  5px  text-align  right       bottomright   position  absolute  bottom  5px  right  5px  text-align  right     lt  style gt   lt div id  content  gt     lt div class  topright  gt here lt  div gt     lt div class  bottomright  gt and here lt  div gt    Lorem ipsum etc                  lt  div gt

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

Examples related to css

Examples related to layout