html - Pure CSS grids do not float next to each other -

i trying build website using pure css layout.

pure css

the div's 1/2 width not float next each other when try , use basic 2 column layout. can see width 50%.

is expected behavior or should explicitly float div's

i have referenced both of 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 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 @ 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 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 @ vero eros et                 accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue                 duis dolore te feugait nulla facilisi.             </div>         </div>    </div>  

from pure.css website:

the constraints pure grids "units" children of "grid". in other words, if have element pure-u-* class name, needs within parent element pure-g or pure-g-r class name.

so believe shouldn't nest columns under additional column. if remove parent column, float correctly:

<div class="pure-g">             <div class="pure-u-1-2">                  lorem ipsum dolor 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 @ 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 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 @ vero eros et                 accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue                 duis dolore te feugait nulla facilisi.             </div>    </div> 

or intention have 1 column sub-divided 2 columns? if so, think elegant solution (without explicitly overriding external file) calculate desired width of subdivided columns , set them accordingly. please clarify.