[CSS Noob] Div leaks outside of container Div

programming web dev
1

Top Image: Dreamweaver’s WYSIWYG
Bottom Image: What appears in a browser

This is a noob question about how to have the container DIV actually contain what’s inside it. Right now, things that are contained in the container DIV is leaking out of it. I want that gray background to contain the avatar image!


#tempContainer {
	width: 380px;
	background: #f2f2f2;
	border: 1px solid #e5e5e5;
	font-size: 62.5%;
	font-family: Verdana, Arial;
	color: #333333;
	padding: 5px;
}

#moduleNav {
	border-bottom: 1px dotted #666666;
	padding-bottom: 5px;
	margin-bottom: 5px;
	margin-top: 5px;
}

#entry {
	margin-bottom: 5px;
}

#profileAvatar {
	float: left;
	padding: 3px;
	background: white;
	width: 80px;
	height: 60px;
	border: 1px solid #ace1f9;
}

#profileAvatar img {
	border: none;
}

#profileInfo {
	float: left;
	height: 66px;
}



<div id="tempContainer">
		<div id="moduleNav">
			<a href="#">Property</a> | <a href="#">Property</a> | <a href="#">Property</a> | <a href="#">Property</a>
		</div>
		<div id="entry">
			<div id="profileAvatar">
				<a href="#"><img src="profileAvatar.jpg" /></a>
			</div>
			<div id="profileInfo">
				Name
				<br />
				Property: Data
			</div>
		</div>
	</div>