2

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:

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.

user478250
  • 259
  • 2
  • 9
  • Very weird indeed. I checked it in chrome and it's true that the parent container is wider than the children. The pure-g-r container is 1141.796875px and it's two children are 761.1875 + 380.59375 = 1141.78125 px in total. I can't find any margins or paddings either. – Drkawashima Jul 01 '13 at 11:00

1 Answers1

6

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>
Drkawashima
  • 8,837
  • 5
  • 41
  • 52
  • 2
    Wow, what!? That was actually it. What the hell is this? D: So basically I have to minify the HTML or Chrome will break? That seems like a pretty bad decision. – user478250 Jul 01 '13 at 11:59
  • 1
    I hadn't thought of this before either. I always have whitespace between my div tags. – Drkawashima Jul 01 '13 at 12:04
  • 2
    It's the same in IE as in chrome ;) I think the key here is that the DIVs where inline-styled. Whitespace in code between inline-styled elements is rendered as a space on the page. It's not that weird if you think about it. If you write a whitespace between two naturally inline elements, like SPAN or IMG, you would expect a rendered space on the page. I guess these browsers interpret whitespaces between inline-styled DIV elements the same way. But this is the first time I've really noticed, and not sure what solution I'd recommend. – Drkawashima Jul 01 '13 at 12:12
  • I just switched to Bootstrap, which handles divs differently :) I wasn't using Pure for more than scaffolding really so it's not that big a deal. Plus, minified Bootstrap from the NetDNA CDN isn't that big. – user478250 Jul 01 '13 at 12:30