I'm having an issue with 2 DIV elements (the ones labeled "Module" below) not behaving as expected! When I try to float them so they appear side by side, they end up jumping outside of the parent container and falling below it. I've tried to troubleshoot this on my own but haven't been successful. Can someone please assist me?
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;
}