I am facing an issue with creating a margin underneath my floated element to separate it from the footer. The margin works perfectly in FireFox and Chrome, but not in Internet Explorer 10. Can anyone help me fix this problem? Here is the HTML code:
<div id="wrapper">
<div id="mainfloat">
<div class="text_body">
Text goes here
</div>
</div>
</div>
<div id="footer">
Footer goes here.
</div>
Below is the relevant CSS code:
#wrapper {
min-height:100%;
position:relative;
width: 100%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
#mainfloat{
float: left;
position: relative; /*also important to add*/
background-color:#FFF;
font-family: Arial, Helvetica, sans-serif;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
min-height: 550px;
min-width: 650px; /*this was commented out earlier*/
max-width: 900px;
margin-left: 15%;
margin-right: 17%;
margin-top: 40px;
margin-bottom: 220px; /*makes space between float and footer*/
padding:10px;
}
#footer{
min-height: 50px;
max-height: 200px;
min-width: 800px;
width: 100%;
background: black;
bottom: 0;
position: absolute;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
}