Howdy doody,

Any CSS experts here?

Im trying to get this flipping link text "Home" to align to the bottom of my divvy.  

HTML code:

  Home   

picture here

Text

text

CSS:

 
#container {
text-align:left;
width:940px;
height:700px;
margin: auto;

}

#links {
margin-left: 20px;
float: left;
width: 680px;
height: 59px;
text-align: left;
margin-bottom:5px;
margin-top:40px;
vertical-align: bottom;
}

#logo {
margin-right: 21px;
margin-bottom:5px;
float: right;
width: 208px;
height: 59px;
}

#flashbox{
margin-left: 20px;
float: left;
width: 180px;
border: 2px solid #000000;
color: #333333;
height: 540px;
}

#main {
float: left;
margin-left: 20px;
margin-right: 20px;
border: 2px solid #000000;
background: #FFFFFF;
color: #333333;
width: 650px;
height: 500px;
overflow: auto;
padding: 20px;
}

Vertical-align only works on inline-level elements, block level elements are unaffected. Change the div#links to a span#links and it should work.

edit:
Ahh wait. After looking again you are trying to affect the div when you need to affect the a.

set a { vertical-align: bottom; }

Actually any good CSS tutorial sites would be welcomed. My colleague at work is trying to make some text flash.

Quote from: FuMaNMy colleague at work is trying to make some text flash.

flashing text :?:

Quote from: FuMaNActually any good CSS tutorial sites would be welcomed. My colleague at work is trying to make some text flash.

You have a duty to bludgeon your colleague to death with a large rubber sex toy.

BLINK TAGS ARE BAD! MMMMMMMKAY!

This is a most thoroughly excellent CSS property resource index

Or http://www.w3schools.com/

Thanks guys,

I did try using span and also setting the links to vertical-align: bottom but neither worked.

:cry:

Can you not just use a

section ?

Home

Alternatively you need to use a container that can fill the area described by the style of the DIV. i.e.

Home

Normal

Top

This will work as you are forcing the the tables height to use all of the space available to the DIV. Each cell within the table is streched to the maximum height the table is allowed to grow to, instead of using its defaul behaviour of automatically shrinking to fit the content.

This may work with a SPAN element but I am unsure as to whether you can force the height on a SPAN.

Not being patronising, just trying to de-bug - have you had a quick look at exactly what your DIVs are doing, in case maybe theyre not in the right place to start with, and so neither is the contained text?

Stick this into your CSS and have a look at your page:

div {border: 1px solid pink;}

On the above note, if youre working with FireFox I totally recommend the WebDeveloper Extension:

http://chrispederick.com/work/webdeveloper/

It allows you to dynamically switch on/off a whole rake of CSS and layout options from within the browser

Just had a thought.

I dont think vertical-align can actually be used in that way. You can vertically position an element (i.e. DIVs, images etc) within text, but not text/an element within another element. I seem to remember trying to vertically centre a website with CSS and failing miserably - the only way I found to do it in the end was with tables.

So you might be out of luck, like.

Tables allow the valign="top/middle/bottom" tag, which will do what you want.

Wizbit, did not notice this till now, if you post link of the actual page, when im awake properly ill sort it for you

Quote from: SaraJust had a thought.

I dont think vertical-align can actually be used in that way. You can vertically position an element (i.e. DIVs, images etc) within text, but not text/an element within another element. I seem to remember trying to vertically centre a website with CSS and failing miserably - the only way I found to do it in the end was with tables.

So you might be out of luck, like.

Tables allow the valign="top/middle/bottom" tag, which will do what you want.

you do it specifing "top-margin" and padding. ive done before now, but yes i agree v-align in css is a damn arse to do, but possible.

Vertical align will be doing nothing in your css. the top-margin is right. remove the vertical align line and see what happens. Text-align will align the text within the "links" div, and "top-margin" should shove the div 40pxs down from the start of "container". But it may also shove everything else down.

In which case Sara is right, you will need to rejig your code, shove the links div in html last, and then the rest up. Another method would be for you to shove a top-margin value for the LOGO and Flashbox divs else they will just flow after your links div.

This has been hacked out many times before.

You can vertical align within a block level element. Said block level element has to be of a fixed size. So this is obviously not going to work due to different window sizes.

HTML/CSS will wrap text vertially if an element isnt wide enough - you obviously cant wrap horizontally and vertically (where would the text go!?)

The only way round this (and it is hacky imo) is to use a table, specify it 100% width and height, then you can align vertically within that.

Cornet