# Valign in css?

**URL:** <https://forum.kirupa.com/t/valign-in-css/185094>\
**Category:** Uncategorized\
**Created:** [April 10, 2006, 10:21pm UTC](https://forum.kirupa.com/t/valign-in-css/185094 "2006-04-10T22:21:05Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![danulf](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/danulf/32/555_2.png) [@danulf](https://forum.kirupa.com/u/danulf)\
**Post date:** [April 10, 2006, 10:21pm UTC](https://forum.kirupa.com/t/valign-in-css/185094/1 "2006-04-10T22:21:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Ankou](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ankou/32/1351_2.png) [@Ankou](https://forum.kirupa.com/u/Ankou)\
**Post date:** [April 10, 2006, 11:07pm UTC](https://forum.kirupa.com/t/valign-in-css/185094/2 "2006-04-10T23:07:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![danulf](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/danulf/32/555_2.png) [@danulf](https://forum.kirupa.com/u/danulf)\
**Post date:** [April 11, 2006, 2:31pm UTC](https://forum.kirupa.com/t/valign-in-css/185094/3 "2006-04-11T14:31:35Z")

</div>

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:

```auto

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 😃

---

<div class="post-metadata">

**Author:** ![DESIGN\_GEEZER](https://avatars.discourse-cdn.com/v4/letter/d/da6949/32.png) [@DESIGN\_GEEZER](https://forum.kirupa.com/u/DESIGN_GEEZER)\
**Post date:** [April 11, 2006, 2:43pm UTC](https://forum.kirupa.com/t/valign-in-css/185094/4 "2006-04-11T14:43:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![danulf](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/danulf/32/555_2.png) [@danulf](https://forum.kirupa.com/u/danulf)\
**Post date:** [April 11, 2006, 3:55pm UTC](https://forum.kirupa.com/t/valign-in-css/185094/5 "2006-04-11T15:55:14Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![Ankou](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ankou/32/1351_2.png) [@Ankou](https://forum.kirupa.com/u/Ankou)\
**Post date:** [April 11, 2006, 6:38pm UTC](https://forum.kirupa.com/t/valign-in-css/185094/6 "2006-04-11T18:38:56Z")

</div>

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:

```auto
<!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.

---

<div class="post-metadata">

**Author:** ![danulf](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/danulf/32/555_2.png) [@danulf](https://forum.kirupa.com/u/danulf)\
**Post date:** [April 11, 2006, 6:52pm UTC](https://forum.kirupa.com/t/valign-in-css/185094/7 "2006-04-11T18:52:24Z")

</div>

thanks man! That works great!

---

<div class="post-metadata">

**Author:** ![Ankou](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ankou/32/1351_2.png) [@Ankou](https://forum.kirupa.com/u/Ankou)\
**Post date:** [April 11, 2006, 6:56pm UTC](https://forum.kirupa.com/t/valign-in-css/185094/8 "2006-04-11T18:56:29Z")

</div>

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.