Question

I’m using Bootstrap and custom CSS to develop my personal website and I have the following HTML code to generate the content part with two columns.

<div class="row-fluid">
    <div id="content" class="span9">
        content
    </div>
    <div id="ads" class="span3">
        ads
    </div>
</div>

This works in all browser, but with the following CSS, the ads div goes under the content div when viewed in Firefox. In all other browsers, the ads div keeps in the right side of content div (this is the correct display).

#content{
    margin-top:2em;    
    padding: 1em;
    box-sizing: border-box;
    border-radius: 20px 20px 0 0;
    border: 2px solid #EEF;
}

#ads{
    margin-top:2em;            
    padding: 1em;
    box-sizing: border-box;
    border-radius:15px;
    border: 2px solid #EEF;
}

I think this happens because the padding + border, but all other browsers displays correctly. So, there is a way to fix this in Firefox?

If needed, this error can be viewed in http://www.dinhani.com.br (sorry, content is in portuguese because development started these days).

Answer 1

Firefox doesn’t implement box-sizing without a -moz- prefix. See bugzilla

Also, your question missed the most important CSS rules: i.e. the width of each div. The page you link to shows rules for .row-fluid > .span3 and another for .span9