0

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).

4 Answers 4

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

1
  • The width is defined by span3 and span9 classes of Bootstrap. It uses a grid of span12 (12 columns). Apr 16, 2012 at 12:04
0

You change your html like this (just small changes in div start tag. and I hope you get our output like image below

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

enter image description here ok you want to like this image2

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

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

enter image description here

1
  • Sorry, the error in the div here is StackOverflow ocurred when I was pasting the code. The code in the server is correct. Plus, the desired visualization is the ads div in the right side of the content div, not below. Apr 16, 2012 at 11:24
0

I hope this fiddle can help you http://jsfiddle.net/9Zf8U/1/ I just added firefox css hack here and nothing eals.

1
  • Please, can you explain better what do you did? Apr 16, 2012 at 12:02
0

Adding css hacks for (moz browser) only.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.