Cumulus Support

Posted: **Sun 27 Feb 2011 2:51 pm**

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?

Posted: **Sun 27 Feb 2011 8:30 pm**

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'

Posted: **Sun 27 Feb 2011 8:50 pm**

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

Cumulus Support

CSS DIV's and alignment

CSS DIV's and alignment

Re: CSS DIV's and alignment

Re: CSS DIV's and alignment