CSS width wierdness in Chrome and Firefox with Pure CSS

Question

To start off with, I'm quite new to CSS still so I hope I haven't done anything horrendously stupid.

Basically, I have a design I'm doing built using Pure and the width is playing up in Google Chrome, while it works as intended in Firefox.

Here's a link to what I've done: http://egf.me/Rushd/rushdtest.html and screenshots:

• Firefox: http://i.imgur.com/mn3GIbT.png
• Chrome: http://i.imgur.com/44jLC6J.png

If you have a look at the page source, I haven't really done anything in my own CSS to change anything (I commented it all out as a check just to be sure) so I'm guessing I'm somehow using Pure wrong, since their own site renders fine on Chrome.

Also, inspecting the elements with Chrome's dev tools show that the div elements which should be next to each other have widths which add up to less than that of the parent. And nothing there seems to have buffers or padding. Also, if I manually reduce the widths to be very very slightly less, Chrome seems to magically fix everything.

Answer 1

The problem is that a space is rendered between your child divs. The issue is neither margin nor padding - it's actually caused by the whitespace between your div tags in the HTML code!

Place the tags directly adjacent to eachother without any whitespace and your problem will be solved ;)

Example code

<!--whitespace in HTML = renders as a space between the divs-->
    <div></div>
<div></div>
<!--no whitespace in HTML = renders edge to edge-->
<div></div><div><div>