CSS width with percentage for child elements not working on firefox?

Question

I'm trying to create a fluid layout, so I used a width in %. I tested the site on Chrome, Safari and IE. When it worked fine in IE I thought my work was done, however when checking it in Firefox I realized the width was incorrect. EG: two 50% elements wouldn't fit in one line neither 3 elements with 33% width. This is an example from my site:

http://pranalog.com/example.php

How can I get this to work on Firefox (or on the most browsers)?

Answer 1

You have box-sizing: border-box; set on the div 's, to set border-box in Firefox, add:

-moz-box-sizing: border-box;

to your style rule. This is needed to get box-sizing to work in Firefox, setting this property to border-box forces the browser to render the div 's with the specified width and height, and places the border and padding inside the div 's.

This in turn fixes your issue: with the border rendered on the outside of your div 's, the total width of your elements is essentially 3 times 33.3% = 99.9% plus 6px needed to render the the six 1px wide borders on the right and on the left of each div . Since 6px is more than the 0.1% of the page width that is left, the last div doesn't fit on the same line anymore and moves down to the next line.

With the border rendered inside the div 's by setting border-box properly, you won't have this issue.

Here's a fixed up jsFiddle

Answer 2

It's because you have a border of 1px, try removing the border value and all three fit side by side.

If you would like to keep the border then just reduce the width to around 32%

Good luck