Pure CSS grids do not float next to each other

Question

I am trying to build a website using the Pure CSS layout.

Pure CSS

The div's with 1/2 the width do not float next to each other when I try and use the most basic 2 column layout. I can see their width is 50%.

Is this the expected behavior or should I explicitly float the div's

I have referenced both of the following style sheets.

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/base-min.css"> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css">

<div class="pure-g">
        <div class="pure-u-1">
            <div class="pure-u-1-2">
                 Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
                molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
                duis dolore te feugait nulla facilisi.
            </div>
            <div class="pure-u-1-2">
                Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
                molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
                duis dolore te feugait nulla facilisi.
            </div>
        </div>
   </div> 

Answer 1

From the pure.css website:

The only constraints for Pure Grids are that all "units" are children of a "grid". In other words, if you have an element with a pure-u-* class name, it needs to be within a parent element with a pure-g or pure-g-r class name.

So I believe that you shouldn't nest your columns under an additional column. If you remove the parent column, they float correctly:

<div class="pure-g">
            <div class="pure-u-1-2">
                 Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
                molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
                duis dolore te feugait nulla facilisi.
            </div>
            <div class="pure-u-1-2">
                Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
                molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
                duis dolore te feugait nulla facilisi.
            </div>
   </div>

Or is your intention to have one column sub-divided into two columns? If so, I think the most elegant solution (without explicitly overriding an external file) would be to calculate the desired width of your subdivided columns and set them accordingly. Please clarify.

Answer 2

just try this :

<div class="pure-g">
        <div class="pure-u-1">
            <div class="pure-u-1-2" style="float:left;">
                 <p>Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
                molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
                     duis dolore te feugait nulla facilisi.</p>
            </div>
            <div class="pure-u-1-2">
                <p>Lorem ipsum dolor it amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
                molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
                    duis dolore te feugait nulla facilisi.</p>
            </div>
        </div>
   </div> 

Answer 3

Remove the wrapping div:

<div class="pure-u-1">