Q: DIVs not aligning properly in FireFox The following HTML and CSS code lines up in IE, Chrome and Safari but it does not line up in FireFox.  What can I do to make it work in all four major browsers?
HTML:
<div id="subnav">
    <div id="subnavtab"><a href="">Plan Your Visit</a></div>
    <div id="subnavtab"><a href="">Tour the Museum</a></div>
    <div id="subnavtab"><a href="">Program & Events</a></div>
    <div id="subnavtab"><a href="">Membership</a></div>
    <div id="subnavtab"><a href="">Donate</a></div>
</div>
<div id="featuredexhibit">
    Featured Exhibit - this can be a rotating menu of exhibits
</div>

CSS:
#subnav { margin-top: 20px; width: 740px; text-align: center; }
.subnavtab { background-color: #A1CD3A; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; display: inline-block; } 
#featuredexhibit { width: 740px; height: 200px; background-color: #A7A9AC; margin: 0; clear: both; }


A: You're not allowed to use several times the same id (subnavtab). Use classes instead. 
Delete all the float properties, use text-align: center applied to your #subnav. That will center all your inline-blocks included

A: .subnavtab {
    box-sizing: border-box;
    background-color: #A1CD3A;
    padding: 10px 10px 10px 10px;
    display: inline-block;
    width: 20%;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
}

Here is the full code : http://jsfiddle.net/7tjmZ/2/

A: Use class name instead of id
and you can set the css properties using class name
Example: 
.yourClassName
{
    background-color: #A1CD3A;
    padding: 10px 10px 10px 10px;
    margin: 0 5px 0 0;
    display: inline-block;
}

