CSS DIV's and alignment

[mcrossley]

I have a fairly complex layout (multiple layers of nesting, and overlaying components) that had been using a table to perform the layout. I am trying to convert it to using CSS and DIV's. But the usual problem with lack of vertical alignment in DIVs has reared it's head.

I need an image within a DIV to aligned with the bottom on the DIV container. But I vary the height of the image with a script to produce some animations. The animation only works if the image is 'bottom' aligned. The "vertical-alignment: bottom" construct only works on in-line elements.

Any ideas?

[daj]

The style sheet

Code: Select all

#mydiv { height: 200px; 
	border: 1px solid; 	
	position: absolute; 
	width: 500px;
}

#mydiv img {
	position: absolute;    
	bottom: 0px;  
	left:    0px; 
	}

The html

Code: Select all

<div id="mydiv">
	<img src="http://www.grantownweather.co.uk/images/works_iphone.png"/>
</div>

The important part is the position statement in the containing DIV and the IMG, and also the 'bottom'

[mcrossley]

Thanks David, I'll give that a whirl... once I unpick it all again,and get it something like!