Using Vertical Align

[dog]

Hello,

Could anyone help me please in increasing my understanding of how to use "vertical-align"?

I can't seem to get it to work for anything other than 'td's.

Here's an example:

I'm trying to do is locate a menu at the bottom of a div:

<div name="menuHolder" style="height: 300px;">
  <ul name="menu" style="vertical-align: bottom">
    <li>Menu Option 1</li>
    <li>Menu Option 2</li>
    <li>Menu Option 3</li>
  </ul>
</div>

But the "vertical-align" doesn't seem to have any effect.

Anyone have any good tableless ideas?

Thanks,

dog

[Twey]

I believe you must apply it to the parent element. That code will simply locate all the items of the list at the bottom of the list -- but because the list has stretched to accomodate them, they're at the bottom already anyway.

[dog]

I've tried that and also tried applying the property to both the parent and "child" (?).

On w3schools it doesn't say anything about it not working as has been imagined yet looking at the choice of values (baseline, super, sub, etc.) the thought occurs that perhaps it is intended only for positioning objects within lines of text.

This works fine for example:

<p> 
  A line of text with an image in it. 
  <img name="exampleImage" style="height: 5px; width: 5px; vertical-align: super;" />
  The image is in a superscript position!
</p>

I'm going to continue looking for a solusion.

If anyone has any more ideas, or info about the property don't hesitate to say.

Thanks!

[mwinter]

Could anyone help me please in increasing my understanding of how to use "vertical-align"?

First of all, the vertical-align property applies to inline elements and table cells, only. It has no visible effect on block-level elements, and it cannot be inherited from them either unless explicitly requested. Secondly, the behaviour between table cells and inline elements is distinct; I'll be describing the latter.

Be aware that this is the first time that I've explained this in depth, and it requires a fair amount of background information to understand properly. Take your time reading what follows as it may require several attempts; it depends on how well I expressed myself. Don't hesitate to ask for a better explanation of some part, but try to be as specific as you can (help me to help you, and all that ).

Inline elements (span, a, img, etc.) generate inline boxes. These boxes have their own padding, margins, and borders. Applying a line-height declaration to a non-replaced inline element (those that do not have intrinsic dimensions unlike img, input and button elements, for example) will set the exact height for the generated inline box; margins, borders, and padding are rendered, but don't participate in determining the height of the box.

Block-level elements can also generate inline boxes. These boxes are anonymous as they don't pertain to any actual inline element. For example,

<p>Some <em>emphasised</em> text.</p>

produces three inline boxes: 'Some ', 'emphasised', and ' text.' The first and last are both anonymous, and neither can have margins, borders, or padding. Applying a line-height declaration to the block-level element sets the minimum height for the inline boxes in that element.

Inside block-level elements, inline boxes take part in what is termed the inline formatting context. These boxes are laid-out horizontally and consecutively, with any left- and right- margins, borders, and padding included between them. Inline boxes are further grouped into line boxes, with one line box created for each line of content within the block-level element. The vertical-align property affects how the inline boxes generated by inline elements are aligned within each line box with respect to surrounding anonymous inline boxes, or the inline boxes generated by a parent inline element. That is, a baseline value, for example, aligns the content of the inline element to the baseline of surrounding text.

The CSS specification defines all of this in depth, though it requires reading several distinct parts to get the overall picture. Hopefully, it's been condensed accurately above.

<div name="menuHolder" style="height: 300px;">

Using pixel lengths for an element that contains text is not a good idea. If the text, as viewed by the user, is larger than you planned, that text may overflow. Use em lengths which are proportional to font size, or the min-height property (in MSIE, the height property is equivalent to min-height).

Remember that 3em is not exactly equal to three lines. Line heights are always greater than one by default: typically closer to 1.2. If you use em lengths, set the line height explicitly and an appropriate height (for example, 3.6em @ 1.2).

But the "vertical-align" doesn't seem to have any effect.

Anyone have any good tableless ideas?

Relatively-position the containing div element, and absolutely-position the list within it using the bottom and left box offset properties.

Hope that helps,
Mike

[esteban]

Be aware that this is the first time that I've explained this in depth, and it requires a fair amount of background information to understand properly. Take your time reading what follows as it may require several attempts; it depends on how well I expressed myself.

Indeed! I'm still trying to wrap my gray cells around everything you explained.

Your point about using em's instead of pixels to declare height is easily digestable, though.