CSS style definition that makes a nested div align with the bottom of its parent and creates list.

HTML CODE:
<div id="container">
	<div id="mainBlock">Today is Sunday, December 16, 2007
		<div id="Block2">This is Block2 inside of which is "titles"
			<div id="titles">
			  <p>This is the title box:Title1 <br />
		        Title2 <br />
	          Title3 </p>
		  </div> 	<!-- end titles -->
		</div> 	<!-- end "Block2" -->
	</div> 	<!-- end "mainBlock" -->
	
	<div id="footer1">
	This is footer1 
	</div> 	<!-- end "footer1" -->
</div>
 
CSS CODE:
#container {
	margin: 0 0 0 80px;
	position: relative;
	background-color: #000000;
	width: 792px;
	height: 418px;
	background-image: url(dreamGirl2.jpg);
	background-repeat: no-repeat;
	font-family: "Arial Black";
	font-size: 14px;
	}
#mainBlock{
	clear:both;
	margin: 10px 0px 0px 20px;
	width: 540px;
	float: left;
	color: #FFFFFF;
	}
#Block2 {
	min-width: 470px;
	height: 200px;
	font-family: "Brush Script MT";
	font-size: 20px;
	margin-left: 20px;
	line-height: normal;
	}
#titles{
	clear:both;
	margin: 0 0 0 20;
	width: 160px;
	float: left;
	font-family: "Gill Sans MT";
	font-size: 12px;
	line-height: normal;
	list-style-type: square;
	list-style-position: inside;
	}
#footer1 {
	background-color: #FF9999;
	font-family: "Monotype Corsiva";
	font-size: 18px;
	text-align: center;
	margin-top: 418px;
}

Select allOpen in new window