CSS and vertical alignment

Dev Shed Forums Sponsor:

July 11th, 2003, 09:13 PM

ctstone

Contributing User

Join Date: Jul 2003

Posts: 147

Time spent in forums: < 1 sec
Reputation Power: 10

The forums went down right after I posted this. Here's the original message:

I'm trying to get a bit of text in a <span> to sit at the bottom of a <div>. I've tried setting the vertical-align to 'bottom' and 'text-bottom' but it won't budge.

View source of this page for example

I'm trying to get the part that says 'this should be aligned to the bottom' to shift down so it's flush with the top of the menu.

Any ides? I'm trying to create a page without tables, using only CSS positioning.

__________________
ctnstone.com

July 11th, 2003, 10:19 PM

jharnois

mod_dev_shed

Dev Shed God 20th Plane (14500 - 14999 posts)

Join Date: Sep 2002

Location: Atlanta, GA

Posts: 14,817

Time spent in forums: 1 Month 1 Week 4 Days 7 h 14 m 56 sec
Reputation Power: 1098

Specify the height of the <div> that contains that text, then place that text in another <div> and give it a top margin enough to send it to the bottom of the container <div>. You may also be able to give the <span> that margin (or padding) instead, not sure there.

July 12th, 2003, 01:46 AM

OldJacques

Contributing User

Join Date: Jul 2003

Location: in Orbit mostly

Posts: 148

Time spent in forums: < 1 sec
Reputation Power: 10

I don't think you want to play with fixed margin heights, as that would be tying you into the rendering engine and fixed heights again.
I think the underlying problem is the fact that from what I've read and tried, the "vertical-align" is tied to the line-height, which by default follows the text-size.
I was able to do what you want by inserting

Code:

div.header
{
  line-height:33px;
  margin: 5px;
  vertical-align: text-bottom;
}

it seems that the 33 is the minimum (28 largest character + 5 top margin).

And it will never be FLUSH with the top of the menus if you have the 5 px margin, of course, but you will have a constant border which is the same under "this should be aligned to the bottom" as it is under "SUBTITLE".

Last edited by OldJacques : July 12th, 2003 at 01:48 AM.

July 13th, 2003, 01:12 AM

ctstone

Contributing User

Join Date: Jul 2003

Posts: 147

Time spent in forums: < 1 sec
Reputation Power: 10

Thanks for the help. I couldn't get the line-height method working, but I got what I wanted by changing the <span>s to <div>s and just pushing it to the bottom by setting margin-top.

Now I have a new CSS positioning problem. Ironically, now that I want an element to go to the middle, it won't do it.

click here for example

I'm trying to get that center section to span the distance between the two side menus (with a bit of padding between them). Any ideas? I can get it to look 'ok' for a single resolution by setting width: xx% but it's only exactly centered for that resolution. This is driving me nuts! I may have to go back to tables.

July 13th, 2003, 03:08 AM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 5,268

Time spent in forums: 1 Month 1 Week 4 Days 10 h 31 m 27 sec
Reputation Power: 1954

Back to your first problem, what you want is something like this;

Code:

span.left 
       {float: left;
	font-size: 15px;
	vertical-align: text-bottom;
        position: relative;
        top: 25px;}

For your second problem, try this site. If it's not the answer, it'll point you in the right direction.

cheers,

gary

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

CSS and vertical alignment

Developer Shed Advertisers and Affiliates