align text to bottom of div?

is there a way to align my text to the bottom of a div? I am working on my first site and want to do it without tables. If I use tables I can get the results I want. If I use a div I can get what I want but only after some tweaking, is there a more simple approach? I have other divs with a similar layout but with 'special' fonts. I used .gifs with the font for those divs as not everyone will have this font installed. Because I had to use an image for the font that means they are a set dimension and layout. I want the layout to be consistant between divs that use CSS for the text and .gifs for the text.

This is initially what the div produces:



This is after my tweaks:



I set the line height and used padding to push the text down. The .gif with the 'special' is 25px in height so I need these new divs to be the same. I believe I recreated that with line-height & padding-top, 16px + 9px = 25px, hopefully. Is this a good way to go about positioning the text?

Code: Select all

.practice {
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    width: 150px;
    padding-top: 9px;
    border-bottom: thin dotted #666666;
}

Thanks for any help I can get.

You could apply the css style attribute 'vertical-align' to your divs in question.

There are a number of values you could give it, try them and see which you prefer. They are;

bottom,
text-bottom and
baseline.

bottom;
text-bottom;
and
baseline do not work.

the text is either floating at the top of the div or in the middle.

I am using Dreamweaver 8, I don't know if this helps but I thought I should toss it out.

Are you giving the dvis an actual height and what is the size of the gifs?

The div that I am trying to format the text to the bottom does have a height and width set through its class. The .gif images are 150px(w) by 25px(h).

Code: Select all

<div class="links">"content"</div>

.links {
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    width: 150px;
    border-bottom: thin dotted #666666;
    height: 25px;
    vertical-align: bottom;
}

The code above does not align the text to the bottom, it floats it in the middle of the div like the image in the initial post.

I don't know if it has anything to do with Dreamweaver 8 but I've tried to do my layout out a number of ways. The first time was almost all tables. Vertical align worked fine in the table cells. Then I recently did a layout trying to solve my current problem using all divs, but I inserted a single cell table into the div with the same code copied from my previous version used for the cell, it did not format like the layout with all the tables. Then I removed the copied code and hand-coded it, then it worked. Would this have to do with some setting in Dreamweaver 8?

Also, does it matter if the div I'm working on is a nested div?

I have two divs. One with a gif with a font that is not common, that's why I am displaying it with an image. The other is with a common font and I am working on displaying it so it is consistant with the image. Using vertical-align; and other properties have not worked. I've tried defining the second div, the one with common text with CSS possitioning and styles, but is not working. I done it by defining the height and width and without. It just doesn't want to set on the bottom.

I don't completely understand your post. Vertical-align seems buggy to me, but if you want to try it, understand that it applies to in-line elements.

If you put the text in a containing div at the end of the primary div, and set height of both div's to auto, the text should bottom-align automatically. If you need a bigger box for the containing div, just use padding and leave the size on auto. You don't even have to put the graphic in a containing div, as a graphic is a box element per se and will take styling, so you can increase the box height and manipulate graphic placement using padding and/or margins.

If you set a height, you are going to get all kinds of cross-browser problems. Even among current browsers, where css1 support is pretty good (so that margins and padding will accrue to the box height), Firefox text settings will change text-size set in pixels, but IE won't.

Setting height to auto worked, I also removed the containing div for the gif. Now how do I calculate the proper padding for the div with text so it is even with the gif styling. I'll inlcude a link, it's just a rough up in which I'm obviously trying to work out the bugs. Right now the font is 14px and padding is 7px, should I increase to 8px on padding. Hit me up with any suggestions.

jaredthompson.net/divs.html