CSS - Float and Background Size Relation - html

Question

Currently, I'm working on a navigation and I've encountered this issue:
The content of the navigation is floated to left. When I try to set the background color for the navigation itself, it does not work. Look at this example:
http://cssdeck.com/labs/qknohqxe
When the float:left is removed, the background color becomes visible, however, the "form" of the navigation is destroyed.
I'm pretty sure I'm missing an important point as I'm trying to reach to this simple point where both form and background color are preserved as I wanted.
My guess is that, there is a relation between the floated content, and the size of the carrier (#nav in my case).
Needing suggestions/workarounds for this issue.

Answer 1

Add this to .group:
overflow:auto;
That's it.
There is also another solution: adding a clear:both; element after all floating divs. But it's a bit more dirty:
<div class="container">
<div class="floating div"></div>
<div class="floating div"></div>
<div class="floating div"></div>
<div style="clear:both;"></div>
</div>
It always happens when you use floating divs. The container doesn't care about floating elements so it is like an empty container unless you use one of the mentioned solutions.

Answer 2

On the parent container (.group in your case), add overflow: auto or set a fixed height.
This happens because floated, as well as absolutely positioned elements are, by default, excluded from the document flow and thus are ignored when positioning the following elements.

Answer 3

Add a height to your .group.
.group{
height: 300px;
background-color: blue;
}
When you float objects it takes it out of the document flow. Meaning the parent object has no relation to the height of the child elements.
By setting a height you're forcing the container to go down.
Alternatively you can add an overflow to the container .group to force it to look for the height.
.group{
overflow: hidden;
background-color: blue;
}

Answer 4

Here's working CSS declaration.
.group{
background-color: blue;
float: left;
width: 200px;
}
You need to understand floating and positioning of nested elements.

Answer 5

Just add a clear both; to an extra element:
<div id="nav">
<div class="group">
<div class="button">Button1</div>
<div class="button">Button2</div>
<div class="button small">Button3</div>
<div class="button small">Button4</div>
<div class="button">Button5</div>
<br class="clear" />
</div>
</div>
#nav{
width: 240px;
}
.button{
float:left;
border-radius: 20px;
width: 200px;
height: 50px;
margin-top: 10px;
background-color: red;
text-align: center;
line-height: 50px;
}
.group{
background-color: blue;
}
.small{
width: 100px;
}
.clear
{
clear: both;
}