Full Featured

Lite weight

The Markup

<ul id="finds">
	<li class="result"> <img height="91" width="121" src="challenge-1.jpg"> 
		<h3>Cabo Cervera</h3>
		<ul class="info">
			<li>APARTMENT</li>
			<li>1 Bedroom</li>
			<li>1250 sq.ft.</li>
		</ul>
		<div class="requestPrice"><a href="#"><strong>Request Price</strong></a></div>
		<ul class="extraInfo">
			<li><a href="#">View more details</a></li>
			<li><a href="#">Request Information</a></li>
		</ul>
	</li>
</ul>

The CSS

#finds{
	margin:0;
	padding:0;
	padding-bottom:10px;

	list-style-type: none;
}
.result {
	position:relative; /* this will make the element a bounding box for absolute positioned children */
	width:505px;
	height:94px;
	padding: 3px;
	margin: 10px 0;
	border-top: 1px solid #425D80;
	border-bottom: 1px solid #425D80;
	background-color: #F0F6FB;
	color: #374F6A;
	font-family: Tahoma, sans-serif; /* not the right font, I know */
	font-size:13px;
	
}

.result img{
	float:left;
	margin-right: 3px;

	border: 1px solid #425D80;
}
.result h3{
	width: 270px;/* 'wrong box model' hack */
	margin:0;

	font-size: 18px;
	font-weight: normal;
}
li[class=result] h3{ /* for the nice browsers */
	width: 400px;
}
.result ul {
	margin:0;
	padding:0;

	list-style-type: none;
}
.result li {
	padding:0;
}
.result ul.info {
	font-weight: bold;
}
.result .requestPrice {
	position: absolute;
	top:3px;
	right:3px;
}
.result .extraInfo {
	position: absolute;
	bottom:2px;
	right:2px;
	text-align:right;
	font-size:14px;
	font-weight:bold;
}
.result .extraInfo li {
	margin-bottom:6px;
}
.result .extraInfo a {
	padding:2px;
	padding-left: 3px;
	padding-right:35px;

	background:#DFECF5 url(arrowA.gif) no-repeat right center;
}
.result a:link {
	color: #425D80;
	text-decoration: underline;
}
.result a:visited {
	color: #7491B8;
}
.result a:hover {
	color: #F93;
}
.result a:active {
	color: #F33;
}