Vertically align div within div

[Glasgow]

I have a div tag within another div tag and am failing miserably to align its base with the base of its parent so it always sits snugly at the bottom of its parent (if that's not deemed rude).

I can do it by messing with absolute positions but I'd prefer to do it the 'proper' way.

Any suggestions?

Thanks in advance.

 

[Glasgow]

I seem to have reached a solution by associating

position:absolute; bottom: 0;

with the child div tag. My mistake was trying to get vertical-align to work.

 

[imstillatwork]

Here is the code that my CF script generates. (wil be more or less rows depending on the data...)

<table style="border:1px solid black;" cellspacing="0" cellpadding="1">
	<tr>
	
	
		<td valign="bottom" style="height:300px;text-align:center; vertical-align: bottom;">
			<div style="text-align:center;height:3%;width:50px;background-color:#69c;border:1px solid black;">10</div>
		</td>
	
	
		<td valign="bottom" style="height:300px;text-align:center; vertical-align: bottom;">
			<div style="text-align:center;height:21%;width:50px;background-color:#69c;border:1px solid black;">71.55</div>
		</td>
	
	
		<td valign="bottom" style="height:300px;text-align:center; vertical-align: bottom;">
			<div style="text-align:center;height:11%;width:50px;background-color:#69c;border:1px solid black;">35.41</div>
		</td>
	
	
		<td valign="bottom" style="height:300px;text-align:center; vertical-align: bottom;">
			<div style="text-align:center;height:100%;width:50px;background-color:#69c;border:1px solid black;">333.99</div>
		</td>
	
	</tr>
	<tr>
	
		<td align="center" style="border-right:1px solid black;">Jan</td>
	
		<td align="center" style="border-right:1px solid black;">Feb</td>
	
		<td align="center" style="border-right:1px solid black;">Mar</td>
	
		<td align="center" >Apr</td>
	
	</tr>
</table>

barheight will never be more than 100%, but will always have one bar that is at 100%

I will make nice classes for the CSS after I know it works properly.

 

[imstillatwork]

OH!

Sorry, I had the other thread very similar to this one... I meant to reply to mine...

the suggestion on this thread did not work. The divs jumped down to the bottom of the screen, overlapping each other.

would it be easier if I used a solid 1x1 gif and applied the styles to it, rather than a div? I't would look identical witha 1px solid black border...

 

[traingamer]

The divs jumped down to the bottom of the screen, overlapping each other.

Just slap a bottom margin on the div ABOVE the 'bottom' div so they won't overlap.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill