I am experiencing an issue with a webpage that is working in IE7 but not in IE8;
Here is the HTML code:
<div class="content">
<div class="inner_content">
<div class="column">
<div class="widget">
1
</div>
</div>
<div class="column">
<div class="widget">
4
</div>
</div>
<div class="column">
<div class="widget">
7
</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner_footer">
footer
</div>
</div>
This is the CSS used:
.inner_content, .inner_footer
{
width:983px;
margin:auto;
padding:10px;
}
.content
{
background:#FFFFFF;
}
.footer
{
background:#BBBBBB;
}
The Issue:
While it displays correctly in IE7, the footer div appears below the content div in IE8. How can I make it look consistent across both browsers?
For further reference, here is a link to the jsFiddle: