for example if there is a container div which holds an inner div, if i want the content of the inner div to appear exactly at the bottom edge of the inner div i have used the following code, #outer{ position: relative; float: left; width: 900px; height: 200px; } #outer .inner{ position: relative; float: left; width: 500px; height: 200px; vertical-align: bottom; } however the content of the inner div is starting at its default location which is top left of the inner div instead of using margin-top or padding-top, or positioning methods for the inner div to position the content at the bottom edge can the vertical-align: bottom; be used as this will be very accurate placed at the bottom edge even if the content increases the content will always appear at the bottom edge, unlike other methods where the margin-top, padding-top, and positioning, these values will have to be changed whenever content increases or decreases. please advice. thanks.
Vertical-align does not apply to block elements. It only affects inline content within its inline-box. See §10.8.1 'vertical-align'. cheers, gary
... and it does not behave consistently cross-browser, AND it only effects the positioning in relation to line-height, which can grow in SOME browsers if the element is taller than the existing line-height (common problem with images next to text) Pretty much what you are trying to do, cannot be done in CSS reliably - at least, I'm assuming that the 200px on the outer element is a mistake since it would automatically ALWAYS be at the bottom... if you want it taller and text to wrap around it ABOVE it, that's not going to happen. Though with both the same height I'm not sure what you are trying to accomplish.