Top margin doesn't work in IE 8 - css

Question

<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<div id="gall"></div>
CSS
.btns{
float:left;
padding: 2px 10px 2px 10px;
}
#gall{
margin:25px 0 15px; // this top margin doesn't work in IE8
height:70px;
border:thin solid red;
}
here is jsFiddle

Answer 1

It's a known bug in IE8. There are several ways to fix it.
You can try to add overflow:auto to the clearing <div>
Check this fiddle

Answer 2

Try to add display:inline-block; and width how much you want hope it will solve your problem.

Answer 3

<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<!-- Adding will solve problem -->
<div id="gall"></div>

Answer 4

Works for me.
http://jsfiddle.net/68myJ/13/
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<div id="gall"></div>
.btns{
float:left;
padding:2px 10px 2px 10px;
}
#gall{
margin:25px 0 15px !important;
height:70px;
width:100%;
display:block; /* can revert inline block when long list for IE8*/
border:thin solid red;
}

Answer 5

try this:
<div id="wrapper">
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
</div>
<div id="gall"></div>
​
#wrapper{
overflow:hidden;
}
.btns{
float:left;
padding:2px 10px 2px 10px;
}
#gall{
margin:25px 0 15px !important;
height:70px;
width:100%;
display:block; /* can revert inline block when long list for IE8*/
border:thin solid red;
}
see fiddle: http://jsfiddle.net/68myJ/17/