Valign in css?

1

I have this problem where I want the text to be positioned at the bottom of a <div> tag… Is this possible? I’ve heard that you have to use ‘position’ in css, but I haven’t used that before. If it’s possible, is there an easy way to do this or is it complicated?

thanks in advance

2

It all depends on your setup really. It would really be helpful if you posted the HTML (and CSS) code that you’re working with, or an example of how you may set up your HTML if you don’t already have the code.

3

it’s not anything complicated, I just have a div with a fixed height and width and a bgpicture in it. It’s a wordpress theme. In that div box I have two rows of text, I want those to be at the bottom of the box instead of in the middle.

the css for the box is:


padding: 4px 6px 6px 6px;
width: 600px;
height: 160px;
border-left: 3px solid #EEE;
border-right: 3px solid #EEE;
background: #000 url(header.png);
color: #FFF;
text-align: right;

don’t know how the css is gonna help though :smiley:

4

Have you tried setting the padding for the p element within that box?

So if you “box” div is 160px in height, can’t you specify a “box p” element in your CSS file and say padding-top: 130px or whatever?

valign was such a poorly envisioned thing! Its been causing trouble for years because nobody can use it with divs

5

hey, I didn’t think of that :smiley: That’ll work! thanks

EDIT: nope, that didn’t work… everything go placed further down, even the bgimage…

6

You can use what I like to refer to as the realitive/absolute trick.

Position the containing div with position: relative. Then inside that div you can use a span tag with position: absolute; bottom: 0; right: 0; to place the text where you want it.

Here’s a sample:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <title>Bottom/Right</title>

  <style type="text/css">
#test{
  padding: 4px 6px 6px 6px;
  width: 600px;
  height: 160px;
  border-left: 3px solid #EEE;
  border-right: 3px solid #EEE;
  background: #000 url(header.png);
  color: #FFF;
  text-align: right;
  position: relative;
}

.bottom{
  position: absolute;
  bottom: 0;
  right: 0;
}
  </style>

 </head>
 <body>
  <div id="test">
   <span class="bottom">
    Lorem ipsum usu id molestiae pertinacia definitionem, sea esse choro euripidis ex.<br />
    Oblique labitur fastidii his ad, an munere bonorum pro.
   </span>
  </div>
 </body>
</html>

BTW - I only assumed you wanted the text to be to the right since you had text-align: right; in the code for your DIV. If you want the text to be to the left you can change right: 0; to left: 0; in the CSS for the “bottom” class.

7

thanks man! That works great!

8

No problem, glad I could help.

BTW - I’m not a huge fan of position: absolute when it’s just used to place elements absolutely on the HTML page (body tag). But when using this trick it can be a life saver.