|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
July 11th, 2003, 09:13 PM
|
||||
|
||||
|
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
|
|
#2
July 11th, 2003, 10:19 PM
|
||||
|
||||
|
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.
|
|
#3
July 12th, 2003, 01:46 AM
|
||||
|
||||
|
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.
|
|
#4
July 13th, 2003, 01:12 AM
|
||||
|
||||
|
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.
|
|
#5
July 13th, 2003, 03:08 AM
|
||||
|
||||
|
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. Ask a better question, get a better answer.
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS and vertical alignment |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
