4

I'm using Pure CSS to layout a site, and I've run into an issue. If there's any whitespace between nested grid elements, it breaks the layout and pushes the last div onto the next line. I created a test website with as little in it as possible to test if it was just me, and I'm still running into the problem.

<html>
  <head>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
  </head>
  <body>
    <div class="pure-g">
      <div class="pure-u-1-2">
        <div class="pure-u-1-3">
          <p>Hello world</p>
        </div>
        <div class="pure-u-1-3">
          <p>Hello</p>
        </div>
        <div class="pure-u-1-3">
          <p>Hey there</p>
        </div>
      </div>
      <div class="pure-u-1-2">
        <p>Hi :)</p>
      </div>
    </div>
  </body>
</html>

This code results in this: Incorrect layout

If I take the whitespace out from between the divs, as in

<div class="pure-u-1-3"><p>Hello world</p></div><div class="pure-u-1-3"><p>Hello</p></div><div class="pure-u-1-3"><p>Hey there</p></div>

it fixes itself:

Correct layout

This issue is occurring in both Chrome and Firefox. Is this an issue with Pure CSS, or am I doing something horribly wrong?

EDIT: I found a solution specific to YUI Pure CSS. To nest layouts, each set of columns needs to be in its own .pure-g div. I put this in more detail on the Github issue.

tamasys
  • 59
  • 1
  • 8
  • 1
    @Hugo Specifically asking this with regards to YUI Pure CSS - their documentation doesn't mention needing workarounds so I wasn't sure if I was doing something wrong. – tamasys May 30 '14 at 04:00
  • Your question it's about Pure CSS, but the characteristics are "default HTML". It has been marked as duplicate, but does not mean that you do something wrong, just that your question is too similar to another one, and for Stackoverflow it is better to concentrate the discussion in just one place. – Programmeur May 31 '14 at 05:05

4 Answers4

2

This is true for inline-block elements. Comment them out:

<div class="pure-u-1-2"><!--
    --><div class="pure-u-1-3"><p>Hello world</p></div><!--
    --><div class="pure-u-1-3"><p>Hello</p></div><!--
    --><div class="pure-u-1-3"><p>Hey there</p></div>
</div>
Abhitalks
  • 27,721
  • 5
  • 58
  • 81
  • OP mentioned that he's using a plugin. Changing the `display` property will probably break the functionality of the plugin... – T J May 29 '14 at 07:37
  • @TJ: O yes. I overlooked the "yui" part. Thanks, have removed the alternatives. – Abhitalks May 29 '14 at 07:38
  • The YUI Pure CSS documentation says that nested divs work fine, and they always use whitespace in their example code. So I'm guessing this is probably an issue with the framework? If so I'll submit an issue to them. – tamasys May 29 '14 at 11:49
1

This previous thread on the subject should be of interest to you. Please follow this link, as this has been extensively tested and discussed HERE.

Community
  • 1
  • 1
Len Paulsen
  • 13
  • 1
  • 6
0

Whitespace makes a difference in the rendering of inline elements, but everything beyond a single one is always reduced to one whitespace.

sine css is dividing the with pure-u-1-3- 33.333% for one item and if we put three in a box( pure-u-1-2) its full , so no space for whitespace..

So if you put white space the last div goes down because of lack of space.

Sarath
  • 9,030
  • 11
  • 51
  • 84
  • Line breaks are also considered as a single space. This also applies `inline-block` elements. – T J May 29 '14 at 07:38
0

display: inline-block will always keep the whitespace between your elements if there is any. There are several hacks to get rid of the whitespace between the elements. You can find some good ones here. I personally think the font-size: 0pxhack works best, though it can be a hassle if you're working with EM's

What I really would suggest though would be to use float:left instead of display: inline-block. This way you can avoid having to use any dirty hacks to make it work.

Natalie Hedström
  • 2,607
  • 3
  • 25
  • 36