Div doesn't contain nested elements - html

Question

I have been having trouble with one of my divs for some reason, even though the nav tags are nested within it when I inspect element with firefox or in chrome the div seems to be completely on its own.
<div class="nav">
<nav class="social">
<ul>
<li><img class="icon" src="assets/facebook.png" alt=""></li>
<li><img class="icon" src="assets/google.png" alt=""></li>
<li><img class="icon" src="assets/linkedin.png" alt=""></li>
<li><img class="icon" src="assets/twitter.png" alt=""></li>
<li><img class="icon" src="assets/wordpress.png" alt=""></li>
</ul>
</nav>
<!-- #include _nav -->
</div>
Maybe this is something to do with the css styling for it so here is the css too. I have a feeling it might be something to do with hammer for mac but it seems to work in other respects.
.head {
padding-top: 25px;
overflow: hidden;
padding-bottom: 10px;
// background-color: yellow;
}
h1 {
margin: auto;
text-align: center;
color:white;
font-family: sans-serif;
font-size: 35px;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
padding-bottom: 10px
}
.banner {
height: 200px;
background-color: red;
float: left;
margin: 0px;
}
.callout {
height: 200px;
background-color: green;
float: right;
margin-left: 5px;
margin-right: 0px;
}
.nav {
padding-bottom: 10px;
}
.headnav {
padding-top: 10px;
float: left;
overflow: hidden;
}
nav li {
display: inline;
padding-right: 15px;
}
nav li:last-child {
padding-right: 0px;
}
nav li a {
text-decoration: none;
color: white;
clear: both;
font-size: 20px;
padding-bottom: 4px;
}
nav li a:hover {
color: gray;
}
.icon {
width: 45px;
height: auto;
}
.social {
float: right;
overflow: hidden;
}
.social li {
display: inline;
}
Thanks in advance.

Answer 1

As both your nav elements (social/headnav) contained within the div element (confusingly named "nav") are floated to the right and the left these are removed from the normal document flow (see Mozilla Developer Network for more), and thus the div won't appear to "wrap around" or contain the elements when inspected in developer tools.
These elements are however still children of the div on the Document Object Model (DOM).
Normally an element that only contains floated children would have a height of 1px but in this case it is 10px due to the padding you have applied. This behaviour can cause a problem in terms of defining layout, for example margin below the parent, or styling like background pattern, colour or borders.
It is however entirely normal behaviour and not something you have done wrong.
There are several solutions to clearing floats so that the parent element area is affected by the floated children.
Adding another element after the floated elements with style="clear: both";
<br style="clear: both;" />
Adding the style overflow: hidden to the parent container.
Using one of the clearfix methods listed on CSS tricks