[CSS Noob] Div leaks outside of container Div

[NeoDreamer]

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!



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

[simplistik]

clear the float
http://www.kirupa.com/forum/search.php?searchid=1016252

[NeoDreamer]

Sorry - no matches. Please try some different terms.


I added "clear: both" to all floats, but nothing happened. I'm not sure where to add "clear:both" to.

[NeoDreamer]

I seemed to have temporarily fixed the problem by floating the main container to the left. But the problem is that I don't want the container to floating to the left. Any other method to solve this issue?

http://img374.imageshack.us/img374/917/untitled1mp6.gif

And another issue is that each entry should have a bottom margin set to 5px. But shown in the picture, all of the entries are stacked on top of each other with no space between them.

EDIT:

I found this code from some website:



.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


And I applied it to my main container and all my entry divs. It has fixed my problem with the main div containing everything and the bottom margins funcitoning, but it seems like a bothersome method. I must apply this div everywhere now.....

http://img465.imageshack.us/img465/2739/untitled1gb9.gif

[simplistik]

I'm not a fan of clearfix cause it's not valid css. anyway, if you do a search for

"clear floats" under w/ my username as a filter option you'll see the results. and those are only the searches that i've typed either clear or float in the actual post :lol: but i suppose i'll answer this yet again


.clear { height: 1%; padding: 0; margin: 0; clear: both; }



<div>
floated element
</div>
<div>
floated element
</div>
<br class="clear"/>