Made ya look!

In my User Profile, I want the ability to display a Member's Friends!

Here is the look I am going for...
Attachment 59509


Here is the code I am using...
HTML Code:
<div id="boxUser">
	<h3>DoubleDee
		<img src="/images/Light_Green_10.png" width="10" alt="" />
	</h3>
	<br />
	<img class="noborder" src="/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg" width="100" alt="" />
	<ul>
		<li><a href="">Send Private Message</a></li>
		<li><a href="">Find Latest Posts</a></li>
	</ul>
						
	<h3 class="subHeading">Friends</h3>
		<!-- Friend #1 -->
		<div class="friendWrapper">
			<a href="">
				<img class="noborder" src="/uploads/ba5c9300f13b62acd3af9d7e57e571333a94a94d.jpg" width="60" alt="" />
				<div class="userName">CowboyBob</div>
			</a>
		</div>

		<!-- Friend #2 -->
		<div class="friendWrapper">
			<a href="">
				<img class="noborder" src="/uploads/a73dc554b0f812fec6553652750f48c20f6cee1b.gif" width="60" alt="" />
				<div class="userName">SamIAm</div>
			</a>
		</div>

		<!-- Friend #3 -->
		<div class="friendWrapper">
			<a href="">
				<img class="noborder" src="/uploads/0e71dd56ccde8960313ed920eb060c4465f4a757.jpg" width="60" alt="" />
				<div class="userName">Pam-Was-Here</div>
			</a>
		</div>
	</div>

And my markup...
Code CSS:
#boxUser{
	width: 150px;
	margin: 20px 0;
	padding: 0 15px 15px 15px;														/* Create Gutter */
	font-size: 0.9em;
	border: 1px solid #AAA;		/**/
}
 
 
#boxUser h3{
	/* Next two lines needed or IE6&7 won't show negative margins properly. */
	position: relative;
	zoom: 1.0;
	margin: 0 -15px 0 -15px;
	padding: 0.4em 15px 0.2em 15px;
	text-align: left;
	font-weight: bold;
	color: #2323DC;																	/* Deep Blue */
	background-color: #D7D3FF;											/* Blue Gray */
}
 
#boxUser h3 img{
	padding: 0 0 0 5px;
}
 
#boxUser h3.subHeading{
	color: #2323DC;																	/* Deep Blue */
	margin: 4em -15px 1em -15px;
}
 
#boxUser .friendWrapper .userName{
	margin: -0.5em 0 0.8em 0;
}


Is there a better way to code what I have, or does it look okay?


Some thoughts...

1.) I added a "friendWrapper" around the Friend's Image and Friend's Username so that things stay "glued" together.

2.) I wasn't sure what to wrap around the Friend's Username.

3.) It seems like I am using an awful lot of markup here...


I always strive for things which are *Semantically Correct* and also that use the least code to get the greatest benefits.

Your thoughts are welcome.

Thanks,


Debbie