Can't make DIV float inside parent div - html

Question

I've got 2 DIV elements (the ones labeled "Module" below that are not acting right! when i try to float them, so that they show up side by side, they jump outside of the parent container and fall below it. i've not been able to figure this out, can someone help?
jsfiddle: jsfiddle
HTML
<div id="contentwrap">
<div id="content">
<div>
<span style="text-align:center;">
<h2>Application Title</h2>
</span>
</div>
<br/>
<br/>
<div class="module">
<a class="modlink" href=" ../csc/index.php">
<img class="modimg" src="./images/csc.png" alt="csc"/>
<br/>Client Support Center
</a>
<br/>
</div>
<div class="module">
<a class="modlink" href=" ../icm/index.php">
<img class="modimg" src="./images/icm.png" alt="icm"/>
<br/>Inventory Control Management
</a>
<br/>
</div>
</div>
</div>
CSS
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color:#E1E6FA;
background-color:#183152;
}
p {
padding: 10px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
margin-bttom:2px;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#headerwrap {
width: 1000px;
float: left;
margin: 0 auto;
}
#header {
height: 100px;
background: #375D81;
border-radius: 10px;
border: 1px solid #C4D7ED;
margin: 5px;
}
#contentwrap {
width: 820px;
float: left;
margin: 0 auto;
}
#content {
background: #ABC8E2;
border-radius: 10px;
border: 1px solid #C4D7ED;
margin: 5px;
color:black;
}
#companylabel {
margin: 10px;
top:50%;
position:absolute;
margin-top:-.5em;
}
#loginbox
{
width:100%;
}
#loginboxbot
{
width:100%;
}
.ra
{
text-align:right;
}
#borderresults {
color:orangered;
font-weight:bold;
padding:0px;
margin:0px;
border-radius:10px;
}
#alert {
background-color:yellow;
}
.module {
text-align:center;
width:120px;
padding:5px;
border-radius:5px;
border: 1px solid #E1E6FA;
color:#E1E6FA;
background-color:#375D81;
float:left;
}
.modimg {
height:100px;
width:100px;
}
.modlink {
color:#E1E6FA;
text-decoration:none;
}

Answer 1

It's super easy all you have to do is on content div add overflow:auto
I did it for you here and it works.
http://jsfiddle.net/alaingoldman/FAPCW/5/
#content {
...
overflow:auto;
}
enjoy and +1 me :)

Answer 2

Not the most elegant fix, but I added a <br style="clear:both"> below the second .module in you container and that seems to do the trick, though a violation of semantic markup.
http://jsfiddle.net/FAPCW/1/
This is a common issue and is generally fixed with a "clearfix".
Lots of versions exist. Here's one with some more details on the general issue: http://perishablepress.com/lessons-learned-concerning-the-clearfix-css-hack/
Here's even more info: https://stackoverflow.com/a/10184992/363701
heres one I use:
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }
you would just put the cf class on your container, and floated children will be properly cleared.

Answer 3

Typical newbie stuff!
Use a div with clear both style at the end of the 'float' divs.
<div class="module">
<a class="modlink" href=" ../csc/index.php">
<img class="modimg" src="./images/csc.png" alt="csc"/>
<br/>Client Support Center
</a>
<br/>
</div>
<div class="module">
<a class="modlink" href=" ../icm/index.php">
<img class="modimg" src="./images/icm.png" alt="icm"/>
<br/>Inventory Control Management
</a>
<br/>
</div>
*<div style="clear:both"></div>*
</div>
</div>