Jump to content

Align text to the bottom


sverkot
 Share

Recommended Posts

Is there a way to have the text " Is there a way I can have this text aligned to the bottom?" aligned to the bottom if the DIV?

<html><head><title>HTML Div Tag</title></head><body><div style="width:100%">  <div style="background-color:pink;">  <h1>My Sample Page</h1>  </div>  <div style="background-color:pink;                 height:200px;width:310px;float:left;">      Left Side      <div style="background-color:pink;float:left; textalign:bottom;">	    <center>	        Is there a way I can have this text aligned to the bottom?	    </center>  	  </div>  </div>  <div style="background-color:pink;                 height:200px;width:310px;float:right;">	Right Side  </div>  <div style="background-color:pink;                   height:200px;width:310px;float:center;">  	Middle ...More Stuff  </div>  <div style="background-color:yellow;clear:both">  <center>      Footer  </center>  </div></div></body></html></body></html>

Link to comment
Share on other sites

Is there a way to have the text " Is there a way I can have this text aligned to the bottom?" aligned to the bottom if the DIV?
Yes, with just a little CSS, if you're also willing to settle for a little imprecision. For maximum precision you'll need to add Javascript, but the CSS alone can get you darned close, especially if the exact dimensions of the window don't matter. Here's a proof-of-concept page for you to copy and paste:
<html>	<head>		<style type="text/css">			div.test {width: 200px; height: 300px; background-color: #BBBBBB; text-align: center;}						span.test {position: relative; left: 0px; top:280px}		</style>	</head>	<body bgcolor="#ffffff">	<div class='test'>		<span class='test'>My text near the bottom</span>	</div>	</body></html>

As you can see, we're faking the alignment (the span doesn't know its aligned) but arithmetic serves well at times.Alternatively, you could put your 'text' in an image and then have all kinds of background-image placement choices.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...