We help IT Professionals succeed at work.

Align text to top and to bottom of div

n00b0101
n00b0101 asked
on
I'd like to have a container, a row, really.  And I'd like text aligned to the top of the div, and then some more text aligned to the bottom of the div, like this:

------------------------------------------
Top text



Bottom text
------------------------------------------

I tried the following, but it didn't work:
The thing is, I can't use tables, so if someone knows how to accomplish in a completely tableless way, I'd appreciate it!
.mainDiv{
	position: relative;
	float: left;
	width: 150px;
}
 
.mainDiv .upper {
	top: 0;
	position: absolute;
}
 
.mainDiv .lower {
	bottom: 0;
	position: absolute;
}

Open in new window

Comment
Watch Question

Don't talk to me.
CERTIFIED EXPERT
Commented:
Hi n00b0101,

Like this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.mainDiv{
        position: relative;
        float: left;
        width: 150px;
}
 
.mainDiv .upper {
	position: absolute;
	vertical-align: top;
}
 
.mainDiv .lower {
	position: absolute;
	vertical-align: bottom;
}
</style>
</head>
 
<body>
<div class="mainDiv">
  <p class="upper">Top text  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p class="lower">Bottom text </p>
</div>
</body>
</html>

Open in new window

Explore More ContentExplore courses, solutions, and other research materials related to this topic.