Buttons not aligned in Internet Explorer (CSS) - css

Question

This is my code:
<h3 align="center">Is the mobile number above correct ?</h3>
<div class="yesno"><div id="yes">YES</div>
<div id="no">NO</div></div>
This is my CSS:
/* yes and no buttons */
#yes
{
float:left;
display:inline;
width:180px;
background: #999999;
font-size: 26px;
font-weight: bold;
text-align: center;
color: #FFF;
padding-top: 10px;padding-bottom: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-bottom: 0.4em;
margin-top: 0.4em;
}
#yes a:visited,
#yes a:link{
color: #fff;
}
#yes:hover {
background-color: #9fd106;
cursor:pointer;
}
#no
{
float:right;
display:inline;
width:180px;
background: #999999;
font-size: 26px;
font-weight: bold;
text-align: center;
color: #FFF;
padding-top: 10px;padding-bottom: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-bottom: 0.4em;
margin-top: 0.4em;
}
#no a:visited,
#no a:link{
color: #fff;
}
#no:hover {
background-color: #f20909;
cursor:pointer;
}
.yesno
{
width:400px;
margin-left:100px;
}
This is the issue:
I also have div switch to hide/show div. This is:
<!--show hide div logic-->
<style>
div#a { }
div#b { display:none; }
</style>
<script type="text/javascript">
$("a.nope").click(function(){
$("#a").hide();
$("#b").show();
return false;
});
</script>
<!--//end show hide div logic-->

Answer 1

You can't wrap an inline element (a) around a block element (div). Use SPAN instead of DIV as span is an inline element.
Use something like this:
<h3 align="center">Is the mobile number above correct ?</h3>
<div class="yesno">
<span id="yes">YES</span>
<span id="no">NO</span>
</div>

Answer 2

Both #yes and #no have widths of 180px so the buttons consume 360px on their own. The containing <div class="yesno"> is 400px wide so you have 40px left over. You also have three non-breaking spaces. Everything renders fine if you take the non-breaking spaces out so I'm guessing that IE is allocating more than 40px for the non-breaking spaces.
You can either make .yesno wider to accommodate how all the various browsers will render the non-breaking spaces or you can ditch the kludge and let the explicit widths on #yes, #no, and .yesno take care of keeping the buttons separated.
And yes, you should use <span> here instead of <div> as GlennG noted but that's not causing the problem here.

Answer 3

Or just put the buttons in a container div:
#colcontainer {
float:left;
width:100%;
}
Take that div and wrap it around your buttons.
That should do it.

Answer 4

Glenn is correct you cannot have a BLOCK element like a DIV inside a INLINE element such as an A tag.
Mu is to short is also correct.
Addtioanlly you should not be including
nbsp; you should be using CSS to format.
You can also remove alot of unnessasary HTML tags and CSS
For example http://jsbin.com/agojo4/5/edit
This could be refined even more but this is just a 2 minute job.