# \[CSS Noob\] Div leaks outside of container Div

**URL:** <https://forum.kirupa.com/t/css-noob-div-leaks-outside-of-container-div/238500>\
**Category:** web dev\
**Created:** [September 12, 2007, 12:27am UTC](https://forum.kirupa.com/t/css-noob-div-leaks-outside-of-container-div/238500 "2007-09-12T00:27:04Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![NeoDreamer](https://avatars.discourse-cdn.com/v4/letter/n/ccd318/32.png) [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)\
**Post date:** [September 12, 2007, 12:27am UTC](https://forum.kirupa.com/t/css-noob-div-leaks-outside-of-container-div/238500/1 "2007-09-12T00:27:04Z")

</div>

![](http://img452.imageshack.us/img452/1686/untitled2yn8.gif)

**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!

```auto

#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;
}

```

```auto

<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>

```