Here is my fiddle:
Here is my code
<div class='column first'>Column 1</div>
<div class='column second'>Column 2</div>
font-size:0px;/*so that blocks will be on the same line without automatically going to a new line*/
I have no idea why this wouldn't work in firefox/safari. All I am doing is putting two columns in a fixed width container. So the container is a certain width, and the columns are each 50% of that width. I had to make the font-size 0px for the container, then redefine it to 14px in the columns because I guess by default they put a space between two inline-blocks or something. Once I set the font-size to 0px it worked (on Chrome). But now I am seeing that it doesn't work on other browsers.
The problem lies in the fact that box-sizing:border-box is not working on Safari and Firefox... Why not? I thought Safari and Chrome both used "webkit" so should work the same or whatever. And why isn't moz-box-sizing working?
Note: I am using Safari 5 because I am using an old Mac.
Should the box-sizing for moz be a '-moz' prefix? Looks like you're just missing the dash.
Modified fiddle: http://jsfiddle.net/realchaseadams/NbJ5j/
It is taking 139px for column1 and 2 because there is padding-left and padding-right. If you remove those properties, they will get aligned in one line.