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
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 .
To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.
Try using float: right; and a new div for the top so that the image will stay on top.
<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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With