Aligning a nested Div to the Bottom of its Parent

HTML & CSS
1

I have the following code and i want to align the div “NewsFooter” to sit at the bottom of its parent div “ContentLeft”

can i acheive this with a CSS property?? at the moment i have tried vertical-align but it isn’t affecting the NewsFooter Div.


<style type="text/css">
<!--
#ContentLeft {
	width: 254px;
	float: left;
	margin-top: 10px;
	padding: 10px;
	height: 180px;
}
.NewsFooter {
	vertical-align: bottom;
}
-->
</style>
</head>
<body>
<div id="ContentLeft"> <span class="Headline"><?php echo $table[0]['Headline'] ?></span><br />
  <br />
  <?php echo $table[0]['Description'] ?><br />
  <br />
  <div class="NewsFooter"> <span class="URLlink"><a href="<?php echo $table[0]['URL'] ?>">click here to read more</a></span><br />
    <br />
    <span class="Date"><?php echo date('j F Y',strtotime($table[0]['Date'])); ?></span><br />
  </div>
</div>
</body>
2

Try adding clear:left or clear:both to your #ContentLeft style.

3

You can do this:


#ContentLeft {
	width: 254px;
	float: left;
	margin-top: 10px;
	padding: 10px;
	height: 180px;
	[B]position: relative;[/B]
}
.NewsFooter {
[B]	position: absolute;
	bottom: 0px;[/B]
}
4

Hi,

As Aarem said you can place an element absolutely at the bottom but you may also need to preserve the space if you have fluid content above. I have a short demo here just for this question :slight_smile:

5

Thanks guys, i haven’t had chance to get back onto this yet but hopefully follow through your suggestions tomorrow at some point.

thanks again

6

Thanks for that refinement, Paul.